Merge tag '0.1.0-prerelease.20190828224521' into scratch-desktop

[hotfix] Add Marian sprite and costumes

.browserslistrc

@@ -0,0 +1,3 @@
+last 3 versions
+Safari >= 8
+iOS >= 8

.gitignore

@@ -4,7 +4,6 @@
 # NPM
 /node_modules
 npm-*
-/package-lock.json
 
 # Testing
 /.nyc_output

.travis.yml

@@ -14,12 +14,18 @@ env:
 cache:
   directories:
   - node_modules
+before_install:
+# package-lock.json was introduced in npm@5
+- '[[ $(node -v) =~ ^v9.*$ ]] || npm install -g npm@latest' # skipped when using node 9
+- npm install -g greenkeeper-lockfile
 install:
 - npm --production=false install
 - npm --production=false update
+before_script: greenkeeper-lockfile-update
 script:
 - npm test
 - if [ "$TRAVIS_EVENT_TYPE" == "pull_request" ] && [ "$TRAVIS_BRANCH" == "master" ]; then  npm run test:smoke; fi
+after_script: greenkeeper-lockfile-upload
 before_deploy:
 - >
   if [ -z "$BEFORE_DEPLOY_RAN" ]; then

package.json

@@ -44,7 +44,7 @@
     "babel-loader": "^8.0.4",
     "base64-loader": "1.0.0",
     "bowser": "1.9.4",
-    "chromedriver": "74.0.0",
+    "chromedriver": "76.0.0",
     "classnames": "2.2.6",
     "computed-style-to-inline-style": "3.0.0",
     "copy-webpack-plugin": "^4.5.1",
@@ -55,7 +55,9 @@
     "es6-object-assign": "1.1.0",
     "eslint": "^5.0.1",
     "eslint-config-scratch": "^5.0.0",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-import-resolver-webpack": "^0.11.1",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jest": "^22.14.1",
     "eslint-plugin-react": "^7.12.4",
     "file-loader": "2.0.0",
     "get-float-time-domain-data": "0.1.0",
@@ -91,7 +93,7 @@
     "react-draggable": "3.0.5",
     "react-ga": "2.5.3",
     "react-intl": "2.9.0",
-    "react-modal": "3.6.1",
+    "react-modal": "3.9.1",
     "react-popover": "0.5.10",
     "react-redux": "5.0.7",
     "react-responsive": "5.0.0",
@@ -100,18 +102,19 @@
     "react-test-renderer": "16.2.0",
     "react-tooltip": "3.8.0",
     "react-virtualized": "9.20.1",
+    "react-visibility-sensor": "5.0.2",
     "redux": "3.7.2",
     "redux-mock-store": "^1.2.3",
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
     "scratch-audio": "0.1.0-prerelease.20190114210212",
-    "scratch-l10n": "3.3.20190626154950",
-    "scratch-blocks": "0.1.0-prerelease.1561560820",
-    "scratch-paint": "0.2.0-prerelease.20190624133806",
-    "scratch-render": "0.1.0-prerelease.20190605151415",
+    "scratch-l10n": "3.5.20190827223456",
+    "scratch-blocks": "0.1.0-prerelease.1566984014",
+    "scratch-paint": "0.2.0-prerelease.20190822205009",
+    "scratch-render": "0.1.0-prerelease.20190822204747",
     "scratch-storage": "1.3.2",
-    "scratch-svg-renderer": "0.2.0-prerelease.20190523193400",
-    "scratch-vm": "0.2.0-prerelease.20190619042313",
+    "scratch-svg-renderer": "0.2.0-prerelease.20190822202608",
+    "scratch-vm": "0.2.0-prerelease.20190822194548",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.23.0",

src/.eslintrc.js

@@ -1,3 +1,4 @@
+const path = require('path');
 module.exports = {
     root: true,
     extends: ['scratch', 'scratch/es6', 'scratch/react', 'plugin:import/errors'],
@@ -20,6 +21,11 @@ module.exports = {
     settings: {
         react: {
             version: '16.2' // Prevent 16.3 lifecycle method errors
+        },
+        'import/resolver': {
+            webpack: {
+                config: path.resolve(__dirname, '../webpack.config.js')
+            }
         }
     }
 };

src/components/asset-panel/asset-panel.css

@@ -24,7 +24,7 @@
     display: flex;
     flex-grow: 1;
     flex-shrink: 1;
-    overflow-y: auto;
+    overflow: visible;
 }
 
 [dir="ltr"] .detail-area {

src/components/audio-trimmer/audio-selector.jsx

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import Box from '../box/box.jsx';
+import styles from './audio-trimmer.css';
+import SelectionHandle from './selection-handle.jsx';
+import Playhead from './playhead.jsx';
+
+const AudioSelector = props => (
+    <div
+        className={classNames(styles.absolute, styles.selector)}
+        ref={props.containerRef}
+        onMouseDown={props.onNewSelectionMouseDown}
+        onTouchStart={props.onNewSelectionMouseDown}
+    >
+        {props.trimStart === null ? null : (
+            <Box
+                className={classNames(styles.absolute)}
+                style={{
+                    left: `${props.trimStart * 100}%`,
+                    width: `${100 * (props.trimEnd - props.trimStart)}%`
+                }}
+            >
+                <Box className={classNames(styles.absolute, styles.selectionBackground)} />
+                <SelectionHandle
+                    handleStyle={styles.leftHandle}
+                    onMouseDown={props.onTrimStartMouseDown}
+                />
+                <SelectionHandle
+                    handleStyle={styles.rightHandle}
+                    onMouseDown={props.onTrimEndMouseDown}
+                />
+            </Box>
+        )}
+        {props.playhead ? (
+            <Playhead
+                playbackPosition={props.playhead}
+            />
+        ) : null}
+    </div>
+);
+
+AudioSelector.propTypes = {
+    containerRef: PropTypes.func,
+    onNewSelectionMouseDown: PropTypes.func.isRequired,
+    onTrimEndMouseDown: PropTypes.func.isRequired,
+    onTrimStartMouseDown: PropTypes.func.isRequired,
+    playhead: PropTypes.number,
+    trimEnd: PropTypes.number,
+    trimStart: PropTypes.number
+};
+
+export default AudioSelector;

src/components/audio-trimmer/audio-trimmer.css

@@ -1,10 +1,11 @@
 @import "../../css/colors.css";
 
 $border-radius: 4px;
-$trim-handle-width: 12px;
-$trim-handle-height: 14px;
+$trim-handle-width: 30px;
+$trim-handle-height: 30px;
+$trim-handle-border: 3px;
 $stripe-size: 10px;
-$hover-scale: 2;
+$hover-scale: 1.25;
 
 .absolute {
     position: absolute;
@@ -17,6 +18,10 @@ $hover-scale: 2;
     transform: translateZ(0);
 }
 
+.selector {
+    cursor: pointer;
+}
+
 .trim-background {
     cursor: pointer;
     touch-action: none;
@@ -35,6 +40,11 @@ $hover-scale: 2;
     );
 }
 
+.selection-background {
+    background: $motion-primary;
+    opacity: 0.5;
+}
+
 .start-trim-background .trim-background-mask {
     border-top-left-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
@@ -53,6 +63,10 @@ $hover-scale: 2;
     border: 1px solid $red-tertiary;
 }
 
+.selector .trim-line {
+    border: 1px solid $motion-tertiary;
+}
+
 .playhead-container {
     position: absolute;
     top: 0;
@@ -68,31 +82,50 @@ $hover-scale: 2;
         so that we can use transform: translateX() using percentages.
     */
     width: 100%;
+    height: 100%;
     border-left: 1px solid $motion-primary;
     border-top: none;
     border-bottom: none;
     border-right: none;
 }
 
-.start-trim-line {
-    right: 0;
+.right-handle {
+    transform: scaleX(-1);
 }
 
-.end-trim-line {
-    left: 0;
+.selector .left-handle {
+    left: -1px
+}
+
+.selector .right-handle {
+    right: -1px
+}
+
+.trimmer .left-handle {
+    right: -1px
+}
+
+.trimmer .right-handle {
+    left: -1px
 }
 
 .trim-handle {
     position: absolute;
-    left: calc(-$trim-handle-width / 2);
     width: $trim-handle-width;
     height: $trim-handle-height;
+    right: 0;
+    user-select: none;
+}
+
+.trimmer .trim-handle {
+    filter: hue-rotate(150deg);
 }
 
 .trim-handle img {
     position: absolute;
     width: $trim-handle-width;
     height: $trim-handle-height;
+    left: calc($trim-handle-border * 1.5);
 
     /* Make sure image dragging isn't triggered */
     user-select: none;
@@ -103,22 +136,13 @@ $hover-scale: 2;
 }
 
 .top-trim-handle {
-    top: -$trim-handle-height;
+    top: calc(-$trim-handle-height + $trim-handle-border);
 }
 
 .bottom-trim-handle {
-    bottom: -$trim-handle-height;
+    bottom: calc(-$trim-handle-height + $trim-handle-border);
 }
 
 .top-trim-handle img {
-    transform: rotate(180deg);
-}
-
-/* Increase handle size when anywhere on draggable area is hovered */
-.trim-background:hover img {
-    transform: scale($hover-scale);
-}
-
-.trim-background:hover .top-trim-handle img {
-    transform: rotate(180deg) scale($hover-scale);
+    transform: scaleY(-1);
 }

src/components/audio-trimmer/audio-trimmer.jsx

@@ -3,11 +3,12 @@ import React from 'react';
 import classNames from 'classnames';
 import Box from '../box/box.jsx';
 import styles from './audio-trimmer.css';
-import handleIcon from './icon--handle.svg';
+import SelectionHandle from './selection-handle.jsx';
+import Playhead from './playhead.jsx';
 
 const AudioTrimmer = props => (
     <div
-        className={styles.absolute}
+        className={classNames(styles.absolute, styles.trimmer)}
         ref={props.containerRef}
     >
         {props.trimStart === null ? null : (
@@ -20,28 +21,16 @@ const AudioTrimmer = props => (
                 onTouchStart={props.onTrimStartMouseDown}
             >
                 <Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
-                <Box className={classNames(styles.trimLine, styles.startTrimLine)}>
-                    <Box className={classNames(styles.trimHandle, styles.topTrimHandle, styles.startTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                    <Box className={classNames(styles.trimHandle, styles.bottomTrimHandle, styles.startTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                </Box>
+                <SelectionHandle
+                    handleStyle={styles.leftHandle}
+                />
             </Box>
         )}
-
         {props.playhead ? (
-            <div className={styles.playheadContainer}>
-                <div
-                    className={classNames(styles.trimLine, styles.playhead)}
-                    style={{
-                        transform: `translateX(${100 * props.playhead}%)`
-                    }}
-                />
-            </div>
+            <Playhead
+                playbackPosition={props.playhead}
+            />
         ) : null}
-
         {props.trimEnd === null ? null : (
             <Box
                 className={classNames(styles.absolute, styles.trimBackground, styles.endTrimBackground)}
@@ -53,14 +42,9 @@ const AudioTrimmer = props => (
                 onTouchStart={props.onTrimEndMouseDown}
             >
                 <Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
-                <Box className={classNames(styles.trimLine, styles.endTrimLine)}>
-                    <Box className={classNames(styles.trimHandle, styles.topTrimHandle, styles.endTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                    <Box className={classNames(styles.trimHandle, styles.bottomTrimHandle, styles.endTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                </Box>
+                <SelectionHandle
+                    handleStyle={styles.rightHandle}
+                />
             </Box>
         )}
     </div>

src/components/audio-trimmer/icon--handle.svg

@@ -1,18 +1,16 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="8px" height="10px" viewBox="0 0 8 10" 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>handle</title>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="34px" viewBox="1 1 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Bottom Left Handle</title>
     <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Desktop---1280x720" transform="translate(-461.000000, -329.000000)" stroke="#E64D00" fill="#FF661A">
-            <g id="Step-5---Confirming-Trim" transform="translate(0.000000, 42.000000)">
-                <g id="Sound-Sketches" transform="translate(427.000000, 167.000000)">
-                    <g id="start-playhead" transform="translate(35.000000, 0.000000)">
-                        <path d="M0,122.213854 C0,121.658366 0.45097518,121.208054 0.990777969,121.208054 L5.00922203,121.208054 C5.55641359,121.208054 6,121.659838 6,122.213854 L6,126.298963 L3,129.208054 L0,126.298963 L0,122.213854 Z" id="handle" transform="translate(3.000000, 125.208054) scale(1, -1) translate(-3.000000, -125.208054) "></path>
-                    </g>
-                </g>
-            </g>
+    <defs>
+        <path d="M17,5 C23.627417,5 29,10.372583 29,17 L29,29 L17,29 C10.372583,29 5,23.627417 5,17 C5,10.372583 10.372583,5 17,5 Z" id="path-1"></path>
+    </defs>
+    <g id="Bottom-Left-Handle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Bottom-Left" transform="translate(17.000000, 17.000000) scale(1, -1) translate(-17.000000, -17.000000) ">
+            <use stroke="#4D97FF33" stroke-width="8" xlink:href="#path-1"></use>
+            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+            <use stroke="#3D73CC" stroke-width="1" fill="#4D97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
         </g>
     </g>
 </svg>

src/components/audio-trimmer/playhead.jsx

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './audio-trimmer.css';
+
+const Playhead = props => (
+    <div className={styles.playheadContainer}>
+        <div
+            className={classNames(styles.playhead)}
+            style={{
+                transform: `translateX(${100 * props.playbackPosition}%)`
+            }}
+        />
+    </div>
+);
+
+Playhead.propTypes = {
+    playbackPosition: PropTypes.number
+};
+
+export default Playhead;

src/components/audio-trimmer/selection-handle.jsx

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import Box from '../box/box.jsx';
+import styles from './audio-trimmer.css';
+import handleIcon from './icon--handle.svg';
+
+const SelectionHandle = props => (
+    <Box
+        className={classNames(styles.trimLine, props.handleStyle)}
+        onMouseDown={props.onMouseDown}
+        onTouchStart={props.onMouseDown}
+    >
+        <Box className={classNames(styles.trimHandle, styles.topTrimHandle)}>
+            <img src={handleIcon} />
+        </Box>
+        <Box className={classNames(styles.trimHandle, styles.bottomTrimHandle)}>
+            <img src={handleIcon} />
+        </Box>
+    </Box>
+);
+
+SelectionHandle.propTypes = {
+    handleStyle: PropTypes.string,
+    onMouseDown: PropTypes.func
+};
+
+export default SelectionHandle;

src/components/delete-button/delete-button.css

@@ -0,0 +1,36 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+/* wrapper to allow for touch slop if we decide to add it */
+.delete-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    cursor: pointer;
+    transition: all 0.15s ease-out;
+}
+
+.delete-button-visible {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;  /* Mask the icon animation */
+  width: 1.75rem;
+  height: 1.75rem;
+  box-shadow: 0px 0px 0px 2px $motion-transparent;
+  background-color: $motion-primary;
+  color: $ui-white;
+  border-radius: 50%;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.15s ease-out;
+}
+
+.delete-icon {
+    position: relative;
+    margin: 0.25rem;
+    user-select: none;
+    transform-origin: 50%;
+}

src/components/delete-button/delete-button.jsx

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+
+import styles from './delete-button.css';
+import deleteIcon from './icon--delete.svg';
+
+const DeleteButton = props => (
+    <div
+        aria-label="Delete"
+        className={classNames(
+            styles.deleteButton,
+            props.className
+        )}
+        role="button"
+        tabIndex={props.tabIndex}
+        onClick={props.onClick}
+    >
+        <div className={styles.deleteButtonVisible}>
+            <img
+                className={styles.deleteIcon}
+                src={deleteIcon}
+            />
+        </div>
+    </div>
+
+);
+
+DeleteButton.propTypes = {
+    className: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+    tabIndex: PropTypes.number
+};
+
+DeleteButton.defaultProps = {
+    tabIndex: 0
+};
+
+export default DeleteButton;

src/components/delete-button/icon--delete.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>Sound/General/Delete</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M4.54751641,6.99994966 L15.4523042,6.99994966 C15.7284466,6.99994966 15.9523042,7.22380729 15.9523042,7.49994966 C15.9523042,7.51506367 15.9516189,7.5301699 15.9502504,7.54522183 L15.1651793,16.1801783 C15.0715275,17.2102489 14.207924,17.9989808 13.1736049,17.9990897 L6.82662224,17.9997575 C5.79213514,17.9998663 4.92828345,17.2110677 4.83462539,16.180829 L4.04956981,7.54521753 C4.02456905,7.27020922 4.22724022,7.02700381 4.50224854,7.00200306 C4.51729904,7.00063483 4.53240384,6.99994966 4.54751641,6.99994966 Z M7.33333333,4 L7.88603796,2.34188612 C7.95409498,2.13771505 8.14516441,2 8.36037961,2 L11.6396204,2 C11.8548356,2 12.045905,2.13771505 12.113962,2.34188612 L12.6666667,4 L16.5,4 C16.7761424,4 17,4.22385763 17,4.5 L17,5.5 C17,5.77614237 16.7761424,6 16.5,6 L3.5,6 C3.22385763,6 3,5.77614237 3,5.5 L3,4.5 C3,4.22385763 3.22385763,4 3.5,4 L7.33333333,4 Z M8.38742589,4 L11.6125741,4 L11.2792408,3 L8.72075922,3 L8.38742589,4 Z M10,11.7204812 L11.5952436,10.1252376 C11.7905057,9.92997548 12.1070882,9.92997548 12.3023504,10.1252376 L12.3747624,10.1976496 C12.5700245,10.3929118 12.5700245,10.7094943 12.3747624,10.9047564 L10.7795188,12.5 L12.3747624,14.0952436 C12.5700245,14.2905057 12.5700245,14.6070882 12.3747624,14.8023504 L12.3023504,14.8747624 C12.1070882,15.0700245 11.7905057,15.0700245 11.5952436,14.8747624 L10,13.2795188 L8.40475641,14.8747624 C8.20949427,15.0700245 7.89291178,15.0700245 7.69764963,14.8747624 L7.62523762,14.8023504 C7.42997548,14.6070882 7.42997548,14.2905057 7.62523762,14.0952436 L9.22048121,12.5 L7.62523762,10.9047564 C7.42997548,10.7094943 7.42997548,10.3929118 7.62523762,10.1976496 L7.69764963,10.1252376 C7.89291178,9.92997548 8.20949427,9.92997548 8.40475641,10.1252376 L10,11.7204812 Z" id="path-1"></path>
+    </defs>
+    <g id="Sound/General/Delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Trash-Can"></g>
+        <g id="White" mask="url(#mask-2)" fill="#FFFFFF">
+            <rect id="Color" x="0" y="0" width="20" height="20"></rect>
+        </g>
+    </g>
+</svg>

src/components/gui/gui.jsx

@@ -66,8 +66,10 @@ const GUIComponent = props => {
         backpackVisible,
         blocksTabVisible,
         cardsVisible,
+        canChangeLanguage,
         canCreateNew,
         canEditTitle,
+        canManageFiles,
         canRemix,
         canSave,
         canCreateCopy,
@@ -85,6 +87,7 @@ const GUIComponent = props => {
         isRtl,
         isShared,
         loading,
+        logo,
         renderLogin,
         onClickAccountNav,
         onCloseAccountNav,
@@ -202,15 +205,18 @@ const GUIComponent = props => {
                     authorId={authorId}
                     authorThumbnailUrl={authorThumbnailUrl}
                     authorUsername={authorUsername}
+                    canChangeLanguage={canChangeLanguage}
                     canCreateCopy={canCreateCopy}
                     canCreateNew={canCreateNew}
                     canEditTitle={canEditTitle}
+                    canManageFiles={canManageFiles}
                     canRemix={canRemix}
                     canSave={canSave}
                     canShare={canShare}
                     className={styles.menuBarPosition}
                     enableCommunity={enableCommunity}
                     isShared={isShared}
+                    logo={logo}
                     renderLogin={renderLogin}
                     showComingSoon={showComingSoon}
                     onClickAccountNav={onClickAccountNav}
@@ -359,9 +365,11 @@ GUIComponent.propTypes = {
     backpackVisible: PropTypes.bool,
     basePath: PropTypes.string,
     blocksTabVisible: PropTypes.bool,
+    canChangeLanguage: PropTypes.bool,
     canCreateCopy: PropTypes.bool,
     canCreateNew: PropTypes.bool,
     canEditTitle: PropTypes.bool,
+    canManageFiles: PropTypes.bool,
     canRemix: PropTypes.bool,
     canSave: PropTypes.bool,
     canShare: PropTypes.bool,
@@ -378,6 +386,7 @@ GUIComponent.propTypes = {
     isRtl: PropTypes.bool,
     isShared: PropTypes.bool,
     loading: PropTypes.bool,
+    logo: PropTypes.string,
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
@@ -411,8 +420,10 @@ GUIComponent.defaultProps = {
     backpackHost: null,
     backpackVisible: false,
     basePath: './',
+    canChangeLanguage: true,
     canCreateNew: false,
     canEditTitle: false,
+    canManageFiles: true,
     canRemix: false,
     canSave: false,
     canCreateCopy: false,

src/components/icon-button/icon-button.css

@@ -8,6 +8,7 @@
     font-size: 0.75rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: $motion-primary;
+    border-radius: 0.5rem;
 }
 
 .container + .container {
@@ -16,4 +17,14 @@
 
 .title {
     margin-top: 0.5rem;
+    text-align: center;
+}
+
+.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.container:active {
+    background-color: $motion-light-transparent;
 }

src/components/icon-button/icon-button.jsx

@@ -5,14 +5,19 @@ import styles from './icon-button.css';
 
 const IconButton = ({
     img,
+    disabled,
     className,
     title,
     onClick
 }) => (
     <div
-        className={classNames(styles.container, className)}
+        className={classNames(
+            styles.container,
+            className,
+            disabled ? styles.disabled : null
+        )}
         role="button"
-        onClick={onClick}
+        onClick={disabled ? null : onClick}
     >
         <img
             className={styles.icon}
@@ -27,6 +32,7 @@ const IconButton = ({
 
 IconButton.propTypes = {
     className: PropTypes.string,
+    disabled: PropTypes.bool,
     img: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     title: PropTypes.node.isRequired

src/components/library-item/lib-icon--sound-rtl.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
+    <title>Sound/General/Library Tile Icon/RTL</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sound/General/Library-Tile-Icon/RTL" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M40.7941213,60.3333334 C39.5757531,60.3333334 38.3858512,59.7627412 37.7254274,58.7262523 C34.4973213,53.700852 34.4973213,47.4609802 37.7254274,42.43558 C38.7160634,40.8860816 40.8909074,40.373072 42.5989001,41.2839258 C44.2898131,42.2052491 44.8534507,44.2101744 43.8514282,45.7701424 C41.9441696,48.7382694 41.9441696,52.423563 43.8514282,55.3969245 C44.8534507,56.951658 44.2898131,58.956583 42.5989001,59.8779064 C42.0295692,60.1867593 41.4033053,60.3333334 40.7941213,60.3333334 Z M30.014623,64.6666666 C28.9761967,64.6666666 27.9668853,64.1309203 27.3991478,63.1577291 C22.8669507,55.401691 22.8669507,45.7582521 27.3991478,38.002214 C28.2531806,36.5473425 30.1068197,36.0705772 31.5528528,36.9208906 C32.9940332,37.7859493 33.4744267,39.6733502 32.6203939,41.1331368 C29.2188198,46.957538 29.2188198,54.202405 32.6203939,60.0317213 C33.4744267,61.491508 32.9940332,63.3739938 31.5528528,64.2390524 C31.0724594,64.5290438 30.5338363,64.6666666 30.014623,64.6666666 Z M48.8695653,34.1786293 C48.8695653,30.5538239 53.3068341,28.6536838 56.0736627,31.1003021 L62.1037975,36.4397458 C64.2189991,38.3098044 66.9754844,39.3476118 69.8405742,39.3476118 L70.8283578,39.3476118 C73.6831043,39.3476118 76,41.5936876 76,44.3611739 L76,54.689112 C76,57.4616116 73.6831043,59.7026738 70.8283578,59.7026738 L69.7836861,59.7026738 C66.9185963,59.7026738 64.1621111,60.7404813 62.0469094,62.6105398 L56.0736627,67.899848 C53.3068341,70.3464662 48.8695653,68.4463264 48.8695653,64.8165072 L48.8695653,34.1786293 Z" id="Shape" fill="#575E75" fill-rule="nonzero"></path>
+    </g>
+</svg>

src/components/library-item/lib-icon--sound.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
+    <title>Sound/General/Library Tile Icon/LTR</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sound/General/Library-Tile-Icon/LTR" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M59.2058787,60.3333334 C58.5966947,60.3333334 57.9704308,60.1867593 57.4010999,59.8779064 C55.7101869,58.956583 55.1465493,56.951658 56.1485718,55.3969245 C58.0558304,52.423563 58.0558304,48.7382694 56.1485718,45.7701424 C55.1465493,44.2101744 55.7101869,42.2052491 57.4010999,41.2839258 C59.1090926,40.373072 61.2839366,40.8860816 62.2745726,42.43558 C65.5026787,47.4609802 65.5026787,53.700852 62.2745726,58.7262523 C61.6141488,59.7627412 60.4242469,60.3333334 59.2058787,60.3333334 Z M69.985377,64.6666666 C69.4661637,64.6666666 68.9275406,64.5290438 68.4471472,64.2390524 C67.0059668,63.3739938 66.5255733,61.491508 67.3796061,60.0317213 C70.7811802,54.202405 70.7811802,46.957538 67.3796061,41.1331368 C66.5255733,39.6733502 67.0059668,37.7859493 68.4471472,36.9208906 C69.8931803,36.0705772 71.7468194,36.5473425 72.6008522,38.002214 C77.1330493,45.7582521 77.1330493,55.401691 72.6008522,63.1577291 C72.0331147,64.1309203 71.0238033,64.6666666 69.985377,64.6666666 Z M51.1304347,34.1786293 L51.1304347,64.8165072 C51.1304347,68.4463264 46.6931659,70.3464662 43.9263373,67.899848 L37.9530906,62.6105398 C35.8378889,60.7404813 33.0814037,59.7026738 30.2163139,59.7026738 L29.1716422,59.7026738 C26.3168957,59.7026738 24,57.4616116 24,54.689112 L24,44.3611739 C24,41.5936876 26.3168957,39.3476118 29.1716422,39.3476118 L30.1594258,39.3476118 C33.0245156,39.3476118 35.7810009,38.3098044 37.8962025,36.4397458 L43.9263373,31.1003021 C46.6931659,28.6536838 51.1304347,30.5538239 51.1304347,34.1786293 Z" id="Combined-Shape" fill="#575E75" fill-rule="nonzero"></path>
+    </g>
+</svg>

src/components/library-item/library-item.css

@@ -7,6 +7,7 @@
     align-items: center;
     justify-content: flex-start;
     flex-basis: 160px;
+    position: relative;
     height: 160px;
     max-width: 160px;
     margin: $space;

src/components/library-item/library-item.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Box from '../box/box.jsx';
+import PlayButton from '../../containers/play-button.jsx';
+import ScratchImage from '../scratch-image/scratch-image.jsx';
 import styles from './library-item.css';
 import classNames from 'classnames';
 
@@ -35,10 +37,12 @@ class LibraryItemComponent extends React.PureComponent {
                             />
                         </div>
                     ) : null}
-                    <img
-                        className={styles.featuredImage}
-                        src={this.props.iconURL}
-                    />
+                    {this.props.iconSource ? (
+                        <ScratchImage
+                            className={styles.featuredImage}
+                            imageSource={this.props.iconSource}
+                        />
+                    ) : null}
                 </div>
                 {this.props.insetIconURL ? (
                     <div className={styles.libraryItemInsetImageContainer}>
@@ -106,8 +110,9 @@ class LibraryItemComponent extends React.PureComponent {
         ) : (
             <Box
                 className={classNames(
-                    styles.libraryItem,
-                    this.props.hidden ? styles.hidden : null
+                    styles.libraryItem, {
+                        [styles.hidden]: this.props.hidden
+                    }
                 )}
                 role="button"
                 tabIndex="0"
@@ -115,19 +120,30 @@ class LibraryItemComponent extends React.PureComponent {
                 onClick={this.props.onClick}
                 onFocus={this.props.onFocus}
                 onKeyPress={this.props.onKeyPress}
-                onMouseEnter={this.props.onMouseEnter}
-                onMouseLeave={this.props.onMouseLeave}
+                onMouseEnter={this.props.showPlayButton ? null : this.props.onMouseEnter}
+                onMouseLeave={this.props.showPlayButton ? null : this.props.onMouseLeave}
             >
                 {/* Layers of wrapping is to prevent layout thrashing on animation */}
                 <Box className={styles.libraryItemImageContainerWrapper}>
-                    <Box className={styles.libraryItemImageContainer}>
-                        <img
+                    <Box
+                        className={styles.libraryItemImageContainer}
+                        onMouseEnter={this.props.showPlayButton ? this.props.onMouseEnter : null}
+                        onMouseLeave={this.props.showPlayButton ? this.props.onMouseLeave : null}
+                    >
+                        <ScratchImage
                             className={styles.libraryItemImage}
-                            src={this.props.iconURL}
+                            imageSource={this.props.iconSource}
                         />
                     </Box>
                 </Box>
                 <span className={styles.libraryItemName}>{this.props.name}</span>
+                {this.props.showPlayButton ? (
+                    <PlayButton
+                        isPlaying={this.props.isPlaying}
+                        onPlay={this.props.onPlay}
+                        onStop={this.props.onStop}
+                    />
+                ) : null}
             </Box>
         );
     }
@@ -146,9 +162,10 @@ LibraryItemComponent.propTypes = {
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
-    iconURL: PropTypes.string,
+    iconSource: ScratchImage.ImageSourcePropType,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
+    isPlaying: PropTypes.bool,
     name: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.node
@@ -158,11 +175,15 @@ LibraryItemComponent.propTypes = {
     onFocus: PropTypes.func.isRequired,
     onKeyPress: PropTypes.func.isRequired,
     onMouseEnter: PropTypes.func.isRequired,
-    onMouseLeave: PropTypes.func.isRequired
+    onMouseLeave: PropTypes.func.isRequired,
+    onPlay: PropTypes.func.isRequired,
+    onStop: PropTypes.func.isRequired,
+    showPlayButton: PropTypes.bool
 };
 
 LibraryItemComponent.defaultProps = {
-    disabled: false
+    disabled: false,
+    showPlayButton: false
 };
 
 export default LibraryItemComponent;

src/components/library/library.jsx

@@ -10,6 +10,7 @@ import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
 import Spinner from '../spinner/spinner.jsx';
+import storage from '../../lib/storage';
 
 import styles from './library.css';
 
@@ -29,6 +30,47 @@ const messages = defineMessages({
 const ALL_TAG = {tag: 'all', intlLabel: messages.allTag};
 const tagListPrefix = [ALL_TAG];
 
+/**
+ * Find the AssetType which corresponds to a particular file extension. For example, 'png' => AssetType.ImageBitmap.
+ * @param {string} fileExtension - the file extension to look up.
+ * @returns {AssetType} - the AssetType corresponding to the extension, if any.
+ */
+const getAssetTypeForFileExtension = function (fileExtension) {
+    const compareOptions = {
+        sensitivity: 'accent',
+        usage: 'search'
+    };
+    for (const assetTypeId in storage.AssetType) {
+        const assetType = storage.AssetType[assetTypeId];
+        if (fileExtension.localeCompare(assetType.runtimeFormat, compareOptions) === 0) {
+            return assetType;
+        }
+    }
+};
+
+/**
+ * Figure out an `imageSource` (URI or asset ID & type) for a library item's icon.
+ * @param {object} item - either a library item or one of a library item's costumes.
+ * @returns {object} - an `imageSource` ready to be passed to a `ScratchImage`.
+ */
+const getItemImageSource = function (item) {
+    if (item.rawURL) {
+        return {
+            uri: item.rawURL
+        };
+    }
+
+    // TODO: adjust libraries to be more storage-friendly; don't use split() here.
+    const md5 = item.md5 || item.baseLayerMD5;
+    if (md5) {
+        const [assetId, fileExtension] = md5.split('.');
+        return {
+            assetId: assetId,
+            assetType: getAssetTypeForFileExtension(fileExtension)
+        };
+    }
+};
+
 class LibraryComponent extends React.Component {
     constructor (props) {
         super(props);
@@ -38,12 +80,13 @@ class LibraryComponent extends React.Component {
             'handleFilterClear',
             'handleMouseEnter',
             'handleMouseLeave',
+            'handlePlayingEnd',
             'handleSelect',
             'handleTagClick',
             'setFilteredDataRef'
         ]);
         this.state = {
-            selectedItem: null,
+            playingItem: null,
             filterQuery: '',
             selectedTag: ALL_TAG.tag,
             loaded: false
@@ -54,6 +97,7 @@ class LibraryComponent extends React.Component {
         setTimeout(() => {
             this.setState({loaded: true});
         });
+        if (this.props.setStopHandler) this.props.setStopHandler(this.handlePlayingEnd);
     }
     componentDidUpdate (prevProps, prevState) {
         if (prevState.filterQuery !== this.state.filterQuery ||
@@ -69,22 +113,58 @@ class LibraryComponent extends React.Component {
         this.props.onRequestClose();
     }
     handleTagClick (tag) {
-        this.setState({
-            filterQuery: '',
-            selectedTag: tag.toLowerCase()
-        });
+        if (this.state.playingItem === null) {
+            this.setState({
+                filterQuery: '',
+                selectedTag: tag.toLowerCase()
+            });
+        } else {
+            this.props.onItemMouseLeave(this.getFilteredData()[[this.state.playingItem]]);
+            this.setState({
+                filterQuery: '',
+                playingItem: null,
+                selectedTag: tag.toLowerCase()
+            });
+        }
     }
     handleMouseEnter (id) {
-        if (this.props.onItemMouseEnter) this.props.onItemMouseEnter(this.getFilteredData()[id]);
+        // don't restart if mouse over already playing item
+        if (this.props.onItemMouseEnter && this.state.playingItem !== id) {
+            this.props.onItemMouseEnter(this.getFilteredData()[id]);
+            this.setState({
+                playingItem: id
+            });
+        }
     }
     handleMouseLeave (id) {
-        if (this.props.onItemMouseLeave) this.props.onItemMouseLeave(this.getFilteredData()[id]);
+        if (this.props.onItemMouseLeave) {
+            this.props.onItemMouseLeave(this.getFilteredData()[id]);
+            this.setState({
+                playingItem: null
+            });
+        }
+    }
+    handlePlayingEnd () {
+        if (this.state.playingItem !== null) {
+            this.setState({
+                playingItem: null
+            });
+        }
     }
     handleFilterChange (event) {
-        this.setState({
-            filterQuery: event.target.value,
-            selectedTag: ALL_TAG.tag
-        });
+        if (this.state.playingItem === null) {
+            this.setState({
+                filterQuery: event.target.value,
+                selectedTag: ALL_TAG.tag
+            });
+        } else {
+            this.props.onItemMouseLeave(this.getFilteredData()[[this.state.playingItem]]);
+            this.setState({
+                filterQuery: event.target.value,
+                playingItem: null,
+                selectedTag: ALL_TAG.tag
+            });
+        }
     }
     handleFilterClear () {
         this.setState({filterQuery: ''});
@@ -170,8 +250,10 @@ class LibraryComponent extends React.Component {
                     })}
                     ref={this.setFilteredDataRef}
                 >
-                    {this.state.loaded ? this.getFilteredData().map((dataItem, index) => (
-                        <LibraryItem
+                    {this.state.loaded ? this.getFilteredData().map((dataItem, index) => {
+                        const iconSource = getItemImageSource(dataItem);
+                        const icons = dataItem.json && dataItem.json.costumes.map(getItemImageSource);
+                        return (<LibraryItem
                             bluetoothRequired={dataItem.bluetoothRequired}
                             collaborator={dataItem.collaborator}
                             description={dataItem.description}
@@ -179,19 +261,20 @@ class LibraryComponent extends React.Component {
                             extensionId={dataItem.extensionId}
                             featured={dataItem.featured}
                             hidden={dataItem.hidden}
-                            iconMd5={dataItem.md5}
-                            iconRawURL={dataItem.rawURL}
-                            icons={dataItem.json && dataItem.json.costumes}
+                            iconSource={iconSource}
+                            icons={icons}
                             id={index}
                             insetIconURL={dataItem.insetIconURL}
                             internetConnectionRequired={dataItem.internetConnectionRequired}
+                            isPlaying={this.state.playingItem === index}
                             key={typeof dataItem.name === 'string' ? dataItem.name : dataItem.rawURL}
                             name={dataItem.name}
+                            showPlayButton={this.props.showPlayButton}
                             onMouseEnter={this.handleMouseEnter}
                             onMouseLeave={this.handleMouseLeave}
                             onSelect={this.handleSelect}
-                        />
-                    )) : (
+                        />);
+                    }) : (
                         <div className={styles.spinnerWrapper}>
                             <Spinner
                                 large
@@ -227,12 +310,15 @@ LibraryComponent.propTypes = {
     onItemMouseLeave: PropTypes.func,
     onItemSelected: PropTypes.func,
     onRequestClose: PropTypes.func,
+    setStopHandler: PropTypes.func,
+    showPlayButton: PropTypes.bool,
     tags: PropTypes.arrayOf(PropTypes.shape(TagButton.propTypes)),
     title: PropTypes.string.isRequired
 };
 
 LibraryComponent.defaultProps = {
-    filterable: true
+    filterable: true,
+    showPlayButton: false
 };
 
 export default injectIntl(LibraryComponent);

src/components/menu-bar/menu-bar.jsx

@@ -154,7 +154,7 @@ class MenuBar extends React.Component {
             'handleKeyPress',
             'handleLanguageMouseUp',
             'handleRestoreOption',
-            'handleSaveToComputer',
+            'getSaveToComputerHandler',
             'restoreOptionMessage'
         ]);
     }
@@ -225,7 +225,7 @@ class MenuBar extends React.Component {
             event.preventDefault();
         }
     }
-    handleSaveToComputer (downloadProjectCallback) {
+    getSaveToComputerHandler (downloadProjectCallback) {
         return () => {
             this.props.onRequestCloseFile();
             downloadProjectCallback();
@@ -327,11 +327,11 @@ class MenuBar extends React.Component {
                                     [styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
                                 })}
                                 draggable={false}
-                                src={scratchLogo}
+                                src={this.props.logo}
                                 onClick={this.props.onClickLogo}
                             />
                         </div>
-                        <div
+                        {(this.props.canChangeLanguage) && (<div
                             className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
                         >
                             <div>
@@ -345,82 +345,86 @@ class MenuBar extends React.Component {
                                 />
                             </div>
                             <LanguageSelector label={this.props.intl.formatMessage(ariaMessages.language)} />
-                        </div>
-                        <div
-                            className={classNames(styles.menuBarItem, styles.hoverable, {
-                                [styles.active]: this.props.fileMenuOpen
-                            })}
-                            onMouseUp={this.props.onClickFile}
-                        >
-                            <FormattedMessage
-                                defaultMessage="File"
-                                description="Text for file dropdown menu"
-                                id="gui.menuBar.file"
-                            />
-                            <MenuBarMenu
-                                className={classNames(styles.menuBarMenu)}
-                                open={this.props.fileMenuOpen}
-                                place={this.props.isRtl ? 'left' : 'right'}
-                                onRequestClose={this.props.onRequestCloseFile}
+                        </div>)}
+                        {(this.props.canManageFiles) && (
+                            <div
+                                className={classNames(styles.menuBarItem, styles.hoverable, {
+                                    [styles.active]: this.props.fileMenuOpen
+                                })}
+                                onMouseUp={this.props.onClickFile}
                             >
-                                <MenuSection>
-                                    <MenuItem
-                                        isRtl={this.props.isRtl}
-                                        onClick={this.handleClickNew}
-                                    >
-                                        {newProjectMessage}
-                                    </MenuItem>
-                                </MenuSection>
-                                {(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
+                                <FormattedMessage
+                                    defaultMessage="File"
+                                    description="Text for file dropdown menu"
+                                    id="gui.menuBar.file"
+                                />
+                                <MenuBarMenu
+                                    className={classNames(styles.menuBarMenu)}
+                                    open={this.props.fileMenuOpen}
+                                    place={this.props.isRtl ? 'left' : 'right'}
+                                    onRequestClose={this.props.onRequestCloseFile}
+                                >
                                     <MenuSection>
-                                        {this.props.canSave ? (
-                                            <MenuItem onClick={this.handleClickSave}>
-                                                {saveNowMessage}
-                                            </MenuItem>
-                                        ) : []}
-                                        {this.props.canCreateCopy ? (
-                                            <MenuItem onClick={this.handleClickSaveAsCopy}>
-                                                {createCopyMessage}
-                                            </MenuItem>
-                                        ) : []}
-                                        {this.props.canRemix ? (
-                                            <MenuItem onClick={this.handleClickRemix}>
-                                                {remixMessage}
-                                            </MenuItem>
-                                        ) : []}
+                                        <MenuItem
+                                            isRtl={this.props.isRtl}
+                                            onClick={this.handleClickNew}
+                                        >
+                                            {newProjectMessage}
+                                        </MenuItem>
                                     </MenuSection>
-                                )}
-                                <MenuSection>
-                                    <SBFileUploader
-                                        canSave={this.props.canSave}
-                                        userOwnsProject={this.props.userOwnsProject}
-                                        onUpdateProjectTitle={this.props.onUpdateProjectTitle}
-                                    >
-                                        {(className, renderFileInput, loadProject) => (
+                                    {(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
+                                        <MenuSection>
+                                            {this.props.canSave && (
+                                                <MenuItem onClick={this.handleClickSave}>
+                                                    {saveNowMessage}
+                                                </MenuItem>
+                                            )}
+                                            {this.props.canCreateCopy && (
+                                                <MenuItem onClick={this.handleClickSaveAsCopy}>
+                                                    {createCopyMessage}
+                                                </MenuItem>
+                                            )}
+                                            {this.props.canRemix && (
+                                                <MenuItem onClick={this.handleClickRemix}>
+                                                    {remixMessage}
+                                                </MenuItem>
+                                            )}
+                                        </MenuSection>
+                                    )}
+                                    <MenuSection>
+                                        <SBFileUploader
+                                            canSave={this.props.canSave}
+                                            userOwnsProject={this.props.userOwnsProject}
+                                            onUpdateProjectTitle={this.props.onUpdateProjectTitle}
+                                        >
+                                            {(className, renderFileInput, handleLoadProject) => (
+                                                <MenuItem
+                                                    className={className}
+                                                    onClick={handleLoadProject}
+                                                >
+                                                    {/* eslint-disable max-len */}
+                                                    {this.props.intl.formatMessage(sharedMessages.loadFromComputerTitle)}
+                                                    {/* eslint-enable max-len */}
+                                                    {renderFileInput()}
+                                                </MenuItem>
+                                            )}
+                                        </SBFileUploader>
+                                        <SB3Downloader>{(className, downloadProjectCallback) => (
                                             <MenuItem
                                                 className={className}
-                                                onClick={loadProject}
+                                                onClick={this.getSaveToComputerHandler(downloadProjectCallback)}
                                             >
-                                                {this.props.intl.formatMessage(sharedMessages.loadFromComputerTitle)}
-                                                {renderFileInput()}
+                                                <FormattedMessage
+                                                    defaultMessage="Save to your computer"
+                                                    description="Menu bar item for downloading a project to your computer" // eslint-disable-line max-len
+                                                    id="gui.menuBar.downloadToComputer"
+                                                />
                                             </MenuItem>
-                                        )}
-                                    </SBFileUploader>
-                                    <SB3Downloader>{(className, downloadProjectCallback) => (
-                                        <MenuItem
-                                            className={className}
-                                            onClick={this.handleSaveToComputer(downloadProjectCallback)}
-                                        >
-                                            <FormattedMessage
-                                                defaultMessage="Save to your computer"
-                                                description="Menu bar item for downloading a project to your computer"
-                                                id="gui.menuBar.downloadToComputer"
-                                            />
-                                        </MenuItem>
-                                    )}</SB3Downloader>
-                                </MenuSection>
-                            </MenuBarMenu>
-                        </div>
+                                        )}</SB3Downloader>
+                                    </MenuSection>
+                                </MenuBarMenu>
+                            </div>
+                        )}
                         <div
                             className={classNames(styles.menuBarItem, styles.hoverable, {
                                 [styles.active]: this.props.editMenuOpen
@@ -698,9 +702,11 @@ MenuBar.propTypes = {
     authorThumbnailUrl: PropTypes.string,
     authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     autoUpdateProject: PropTypes.func,
+    canChangeLanguage: PropTypes.bool,
     canCreateCopy: PropTypes.bool,
     canCreateNew: PropTypes.bool,
     canEditTitle: PropTypes.bool,
+    canManageFiles: PropTypes.bool,
     canRemix: PropTypes.bool,
     canSave: PropTypes.bool,
     canShare: PropTypes.bool,
@@ -717,6 +723,7 @@ MenuBar.propTypes = {
     languageMenuOpen: PropTypes.bool,
     locale: PropTypes.string.isRequired,
     loginMenuOpen: PropTypes.bool,
+    logo: PropTypes.string,
     onClickAccount: PropTypes.func,
     onClickEdit: PropTypes.func,
     onClickFile: PropTypes.func,
@@ -751,6 +758,7 @@ MenuBar.propTypes = {
 };
 
 MenuBar.defaultProps = {
+    logo: scratchLogo,
     onShare: () => {}
 };
 

src/components/menu/menu.jsx

@@ -58,7 +58,7 @@ MenuItem.propTypes = {
 
 
 const addDividerClassToFirstChild = (child, id) => (
-    React.cloneElement(child, {
+    child && React.cloneElement(child, {
         className: classNames(
             child.className,
             {[styles.menuSection]: id === 0}

src/components/play-button/icon--play.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="49px" height="52px" viewBox="-5 0 49 48" 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>play</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M17.2214651,8.34499443 C19.7766419,4.08636653 23.9234057,4.09303946 26.4745787,8.34499443 L40.1520974,31.140859 C42.7072741,35.3994869 40.7489672,38.8517869 35.7726637,38.8517869 L7.92338006,38.8517869 C2.9495089,38.8517869 0.992773429,35.392814 3.54394641,31.140859 L17.2214651,8.34499443 Z" id="path-1"></path>
+        <filter x="-16.7%" y="-19.3%" width="133.5%" height="138.6%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="2.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.298039216   0 0 0 0 0.592156863   0 0 0 0 1  0 0 0 0.1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop---1280x720" transform="translate(-623.000000, -347.000000)">
+            <g id="Step-3---Altering-Suggested-Trim" transform="translate(0.000000, 42.000000)">
+                <g id="Play-/-Record-/-Stop" transform="translate(623.000000, 307.000000)">
+                    <g id="play" transform="translate(21.849131, 22.002656) rotate(90.000000) translate(-21.849131, -22.002656) ">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/play-button/icon--stop.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="52px" height="52px" viewBox="0 0 52 52" 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>stop-playback</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="44" height="44" rx="4"></rect>
+        <filter x="-13.6%" y="-13.6%" width="127.3%" height="127.3%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.298039216   0 0 0 0 0.592156863   0 0 0 0 1  0 0 0 0.1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop---1280x720" transform="translate(-619.000000, -345.000000)">
+            <g id="Step-4---Playing-Trim" transform="translate(0.000000, 42.000000)">
+                <g id="Play-/-Record-/-Stop" transform="translate(623.000000, 307.000000)">
+                    <g id="stop-playback">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        <rect stroke="#FFFFFF" stroke-width="1" x="0.5" y="0.5" width="43" height="43" rx="4"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/play-button/play-button.css

@@ -0,0 +1,42 @@
+
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.play-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    overflow: hidden;  /* Mask the icon animation */
+    width: 2.5rem;
+    height: 2.5rem;
+    background-color: $sound-primary;
+    color: $ui-white;
+    border-radius: 50%;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    user-select: none;
+    cursor: pointer;
+    transition: all 0.15s ease-out;
+}
+
+.play-button {
+    position: absolute;
+    top: .5rem;
+    z-index: auto;
+}
+
+.play-button:focus {
+    outline: none;
+}
+
+.play-icon {
+  width: 50%;
+}
+
+[dir="ltr"] .play-button {
+    right: .5rem;
+}
+
+[dir="rtl"] .play-button {
+    left: .5rem;
+}

src/components/play-button/play-button.jsx

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
+
+import styles from './play-button.css';
+
+import playIcon from './icon--play.svg';
+import stopIcon from './icon--stop.svg';
+
+const messages = defineMessages({
+    play: {
+        id: 'gui.playButton.play',
+        description: 'Title of the button to start playing the sound',
+        defaultMessage: 'Play'
+    },
+    stop: {
+        id: 'gui.playButton.stop',
+        description: 'Title of the button to stop the sound',
+        defaultMessage: 'Stop'
+    }
+});
+
+const PlayButtonComponent = ({
+    className,
+    intl,
+    isPlaying,
+    onClick,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    setButtonRef,
+    ...props
+}) => {
+    const label = isPlaying ?
+        intl.formatMessage(messages.stop) :
+        intl.formatMessage(messages.play);
+
+    return (
+        <div
+            aria-label={label}
+            className={classNames(styles.playButton, className, {
+                [styles.playing]: isPlaying
+            })}
+            onClick={onClick}
+            onMouseDown={onMouseDown}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            ref={setButtonRef}
+            {...props}
+        >
+            <img
+                className={styles.playIcon}
+                draggable={false}
+                src={isPlaying ? stopIcon : playIcon}
+            />
+        </div>
+    );
+};
+
+PlayButtonComponent.propTypes = {
+    className: PropTypes.string,
+    intl: intlShape,
+    isPlaying: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+    onMouseDown: PropTypes.func.isRequired,
+    onMouseEnter: PropTypes.func.isRequired,
+    onMouseLeave: PropTypes.func.isRequired,
+    setButtonRef: PropTypes.func.isRequired
+};
+
+export default injectIntl(PlayButtonComponent);

src/components/scratch-image/scratch-image.jsx

@@ -0,0 +1,139 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import VisibilitySensor from 'react-visibility-sensor';
+
+import storage from '../../lib/storage';
+
+class ScratchImage extends React.PureComponent {
+    static init () {
+        this._maxParallelism = 6;
+        this._currentJobs = 0;
+        this._pendingImages = new Set();
+    }
+
+    static loadPendingImages () {
+        if (this._currentJobs >= this._maxParallelism) {
+            // already busy
+            return;
+        }
+
+        // Find the first visible image. If there aren't any, find the first non-visible image.
+        let nextImage;
+        for (const image of this._pendingImages) {
+            if (image.isVisible) {
+                nextImage = image;
+                break;
+            } else {
+                nextImage = nextImage || image;
+            }
+        }
+
+        // If we found an image to load:
+        // 1) Remove it from the queue
+        // 2) Load the image
+        // 3) Pump the queue again
+        if (nextImage) {
+            this._pendingImages.delete(nextImage);
+            const imageSource = nextImage.props.imageSource;
+            ++this._currentJobs;
+            storage
+                .load(imageSource.assetType, imageSource.assetId)
+                .then(asset => {
+                    if (!nextImage.wasUnmounted) {
+                        const dataURI = asset.encodeDataURI();
+
+                        nextImage.setState({
+                            imageURI: dataURI
+                        });
+                    }
+                    --this._currentJobs;
+                    this.loadPendingImages();
+                });
+        }
+    }
+
+    constructor (props) {
+        super(props);
+        this.state = {};
+        Object.assign(this.state, this._loadImageSource(props.imageSource));
+    }
+    componentWillReceiveProps (nextProps) {
+        const newState = this._loadImageSource(nextProps.imageSource);
+        this.setState(newState);
+    }
+    componentWillUnmount () {
+        this.wasUnmounted = true;
+        ScratchImage._pendingImages.delete(this);
+    }
+    /**
+     * Calculate the state changes necessary to load the image specified in the provided source info. If the component
+     * is mounted, call setState() with the return value of this function. If the component has not yet mounted, use
+     * the return value of this function as initial state for the component.
+     *
+     * @param {object} imageSource - the new source for the image, including either assetId or URI
+     * @returns {object} - the new state values, if any.
+     */
+    _loadImageSource (imageSource) {
+        if (imageSource) {
+            if (imageSource.uri) {
+                ScratchImage._pendingImages.delete(this);
+                return {
+                    imageURI: imageSource.uri,
+                    lastRequestedAsset: null
+                };
+            }
+            if (this.state.lastRequestedAsset !== imageSource.assetId) {
+                ScratchImage._pendingImages.add(this);
+                return {
+                    lastRequestedAsset: imageSource.assetId
+                };
+            }
+        }
+        // Nothing to do - don't change any state.
+        return {};
+    }
+    render () {
+        const {
+            src: _src,
+            imageSource: _imageSource,
+            ...imgProps
+        } = this.props;
+        return (
+            <VisibilitySensor
+                intervalCheck
+                scrollCheck
+            >
+                {
+                    ({isVisible}) => {
+                        this.isVisible = isVisible;
+                        ScratchImage.loadPendingImages();
+                        return (
+                            <img
+                                src={this.state.imageURI}
+                                {...imgProps}
+                            />
+                        );
+                    }
+                }
+            </VisibilitySensor>
+        );
+    }
+}
+
+ScratchImage.ImageSourcePropType = PropTypes.oneOfType([
+    PropTypes.shape({
+        assetId: PropTypes.string.isRequired,
+        assetType: PropTypes.oneOf(Object.values(storage.AssetType)).isRequired
+    }),
+    PropTypes.shape({
+        uri: PropTypes.string.isRequired
+    })
+]);
+
+ScratchImage.propTypes = {
+    imageSource: ScratchImage.ImageSourcePropType.isRequired
+};
+
+ScratchImage.init();
+
+export default ScratchImage;

src/components/sound-editor/icon--copy-to-new.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.1 (81669) - https://sketch.com -->
+    <title>Sound/General/Copy to New</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sound/General/Copy-to-New" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15,11.0967026 L15,4 C15,3.44771525 14.5522847,3 14,3 L4,3 C3.44771525,3 3,3.44771525 3,4 L3,12 L12.6616037,12 L11.5236347,13.0430331 C11.1882084,13.3580017 11,13.7827132 11,14.2302292 C11,14.6767472 11.187801,15.1005394 11.5128606,15.4074032 L12.1595777,16 L4,16 C2.8954305,16 2,15.1045695 2,14 L2,4 C2,2.8954305 2.8954305,2 4,2 L14,2 C15.1045695,2 16,2.8954305 16,4 L16,12.0333493 C15.8307357,11.617882 15.4895036,11.283542 15.0505738,11.115203 C15.0337809,11.1087625 15.0169209,11.1025961 15,11.0967026 Z M10.3153901,9.43844107 C10.240142,9.43844107 10.1627842,9.41684419 10.0924589,9.37133647 C9.88359282,9.23558464 9.81397079,8.94017013 9.93774329,8.71108891 C10.173333,8.27298072 10.173333,7.72997337 9.93774329,7.2926365 C9.81397079,7.06278396 9.88359282,6.76736945 10.0924589,6.63161762 C10.3034348,6.49740842 10.5720773,6.57299751 10.6944433,6.80130741 C11.0931877,7.54177197 11.0931877,8.46118212 10.6944433,9.20164668 C10.612866,9.35436749 10.4658862,9.43844107 10.3153901,9.43844107 Z M11.6283181,10.2119951 C11.5530701,10.2119951 11.475009,10.1903983 11.405387,10.1448905 C11.1965209,10.0091387 11.1268989,9.7137242 11.2506714,9.48464298 C11.7436516,8.56986072 11.7436516,7.4329391 11.2506714,6.51892817 C11.1268989,6.28984695 11.1965209,5.99366112 11.405387,5.85790929 C11.6149563,5.7244714 11.8835989,5.79928918 12.0073714,6.02759908 C12.6642095,7.2447377 12.6642095,8.75806213 12.0073714,9.97520074 C11.9250908,10.1279216 11.7788142,10.2119951 11.6283181,10.2119951 Z M9.1892643,5.64286604 L9.1892643,10.3563857 C9.1892643,10.9148194 8.58587338,11.2071486 8.20963312,10.8307458 L7.39737611,10.0170061 C7.10974571,9.72930481 6.73491195,9.56964214 6.34530989,9.56964214 L6.20325282,9.56964214 C5.81505726,9.56964214 5.5,9.22486333 5.5,8.79832489 L5.5,7.20941137 C5.5,6.78364425 5.81505726,6.43809412 6.20325282,6.43809412 L6.33757411,6.43809412 C6.72717617,6.43809412 7.10200993,6.27843145 7.38964033,5.99073012 L8.20963312,5.16927725 C8.58587338,4.79287444 9.1892643,5.08520367 9.1892643,5.64286604 Z M13.937674,12.1868928 C14.1369962,12.0038895 14.4343459,11.9498886 14.6924846,12.0488903 C14.9506233,12.1478921 15.1172698,12.3758962 15.1172698,12.6339008 L15.1172698,13.2759122 C15.2675784,13.3119129 15.44076,13.3599137 15.6237444,13.428915 C15.9439671,13.545917 16.2968655,13.7259203 16.6236234,13.9686246 C16.7053128,14.0319257 16.7837347,14.0949268 16.8621566,14.1639281 C16.9307757,14.2239291 17.0418734,14.325931 17.0908871,14.385932 C17.2215902,14.5209344 17.3555609,14.6949375 17.4699262,14.8569404 C17.6921215,15.1989465 17.8456977,15.5679531 17.9273871,15.9186594 C18.005809,16.2699656 18.0123442,16.6029716 17.9862036,16.8789765 C17.9567954,17.1579815 17.8979789,17.3709853 17.8424301,17.5389883 C17.8162895,17.6229898 17.7934164,17.6589904 17.7803461,17.6979911 L17.7574731,17.7519921 C17.6921215,17.9109949 17.5156723,18.0159968 17.3196176,17.9979965 C17.0876195,17.9769961 16.9177054,17.7849927 16.9405785,17.5719889 L16.9471136,17.5149878 C16.9503812,17.4819873 16.9634515,17.4159861 16.960184,17.3649852 C16.960184,17.2629833 16.9569164,17.0889802 16.920973,16.8999769 C16.8817621,16.7079734 16.8098753,16.4919696 16.6922425,16.2849659 C16.5746097,16.0809623 16.4144984,15.8889588 16.2282464,15.730256 C16.1269515,15.6519546 16.0387269,15.5859534 15.921094,15.5139521 C15.8492073,15.4686513 15.8328694,15.4719514 15.774053,15.4389508 C15.7217718,15.4149504 15.6694905,15.39365 15.6172092,15.3729496 C15.4374924,15.3069485 15.2675784,15.2679478 15.1172698,15.2529475 L15.1172698,15.8259577 C15.1172698,16.0839623 14.9506233,16.3119664 14.6924846,16.4109681 C14.4343459,16.5099699 14.1369962,16.4559689 13.937674,16.2729657 L12.1993223,14.6802373 C12.0718867,14.5599351 12,14.3979322 12,14.2302292 C12,14.0619262 12.0718867,13.8999234 12.1993223,13.7802212 L13.937674,12.1868928 Z" id="Copy-to-New" fill="#4D97FF" fill-rule="nonzero"></path>
+    </g>
+</svg>

src/components/sound-editor/icon--copy.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.1 (81669) - https://sketch.com -->
+    <title>Sound/General/Copy</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sound/General/Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Secondary-Color" opacity="0.25" transform="translate(2.000000, 4.000000)" fill="#4D97FF">
+            <rect id="selection" x="0" y="0" width="16" height="12"></rect>
+        </g>
+        <g id="Primary-Color" transform="translate(0.000000, 2.000000)" fill="#4D97FF" fill-rule="nonzero">
+            <path d="M1.5,3.93699126 C0.637386394,3.71496986 0,2.93191971 0,2 C0,0.8954305 0.8954305,0 2,0 C3.1045695,0 4,0.8954305 4,2 C4,2.93191971 3.36261361,3.71496986 2.5,3.93699126 L2.5,12.0630087 C3.36261361,12.2850301 4,13.0680803 4,14 C4,15.1045695 3.1045695,16 2,16 C0.8954305,16 0,15.1045695 0,14 C0,13.0680803 0.637386394,12.2850301 1.5,12.0630087 L1.5,3.93699126 Z M17.5,12.0630087 L17.5,3.93699126 C16.6373864,3.71496986 16,2.93191971 16,2 C16,0.8954305 16.8954305,0 18,0 C19.1045695,0 20,0.8954305 20,2 C20,2.93191971 19.3626136,3.71496986 18.5,3.93699126 L18.5,12.0630087 C19.3626136,12.2850301 20,13.0680803 20,14 C20,15.1045695 19.1045695,16 18,16 C16.8954305,16 16,15.1045695 16,14 C16,13.0680803 16.6373864,12.2850301 17.5,12.0630087 Z M11,7 L12,7 C12.5522847,7 13,7.44771525 13,8 C13,8.55228475 12.5522847,9 12,9 L11,9 L11,10 C11,10.5522847 10.5522847,11 10,11 C9.44771525,11 9,10.5522847 9,10 L9,9 L8,9 C7.44771525,9 7,8.55228475 7,8 C7,7.44771525 7.44771525,7 8,7 L9,7 L9,6 C9,5.44771525 9.44771525,5 10,5 C10.5522847,5 11,5.44771525 11,6 L11,7 Z" id="handles-and-plus"></path>
+        </g>
+    </g>
+</svg>

src/components/sound-editor/icon--delete.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Sound/General/Trim</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M6.54210671,14.8773591 C6.54210671,15.6756813 5.89668548,16.3230878 5.11194905,16.3230878 C4.31632862,16.3230878 3.6709074,15.6756813 3.6709074,14.8773591 C3.6709074,14.086692 4.31632862,13.440379 5.11194905,13.440379 C5.89668548,13.440379 6.54210671,14.086692 6.54210671,14.8773591 L6.54210671,14.8773591 Z M8.63401159,13.5836396 C8.82992359,13.3878866 8.82992359,13.0685577 8.63401159,12.8706175 L7.10916313,11.338495 C6.91216272,11.1405548 6.59434991,11.1405548 6.3984379,11.338495 L5.87709428,11.861232 C5.63546947,11.7912421 5.37425346,11.7595279 5.11194905,11.7595279 C3.39010019,11.7595279 2.00021333,13.1571387 2.00021333,14.8872014 C2.00021333,16.8414505 3.794985,18.3779474 5.83246988,17.9230131 C7.36929074,17.5796252 8.34776238,16.1568618 8.19973997,14.5820892 C8.18450237,14.4213311 8.15620397,14.2638539 8.11266797,14.1074702 L8.63401159,13.5836396 Z M6.54210671,5.11617453 C6.54210671,5.91559037 5.89668548,6.5629969 5.11194905,6.5629969 C4.31632862,6.5629969 3.6709074,5.91559037 3.6709074,5.11617453 C3.6709074,4.32660102 4.31632862,3.68028808 5.11194905,3.68028808 C5.89668548,3.68028808 6.54210671,4.32660102 6.54210671,5.11617453 M18.0021973,16.1706411 L17.9368933,16.235163 C16.926858,17.2500165 15.2877276,17.2500165 14.2766039,16.235163 L7.87898848,9.80702856 C7.70919807,9.6353346 7.70919807,9.3586558 7.87898848,9.18805543 L9.15785853,7.90199109 C9.32764893,7.73139072 9.60301414,7.73139072 9.77280455,7.90199109 L18.0021973,16.1706411 Z M18.0021973,3.82934469 L12.4045559,9.45368895 L10.5107398,7.54865148 L14.2766039,3.76482275 C15.2877276,2.74996927 16.926858,2.74996927 17.9368933,3.76482275 L18.0021973,3.82934469 Z M8.63401159,6.41864274 C8.82992359,6.61548933 8.82992359,6.93591182 8.63401159,7.1327584 L7.10916313,8.66488096 C6.91216272,8.86282113 6.59434991,8.86282113 6.3984379,8.66488096 L5.87709428,8.14214392 C5.63546947,8.21213382 5.37425346,8.2427544 5.11194905,8.2427544 C3.39010019,8.2427544 2.00021333,6.84623726 2.00021333,5.11617453 C2.00021333,3.16192542 3.794985,1.62542849 5.83246988,2.0814564 C7.36929074,2.42375074 8.34776238,3.84651408 8.19973997,5.42128673 C8.18450237,5.58313837 8.15620397,5.73842845 8.11266797,5.89590571 L8.63401159,6.41864274 Z M10.3929749,10.0447755 C10.3929749,10.2744298 10.2079469,10.4614341 9.97829448,10.4614341 C9.74973047,10.4614341 9.56361406,10.2744298 9.56361406,10.0447755 C9.56361406,9.81402755 9.74973047,9.62811689 9.97829448,9.62811689 C10.2079469,9.62811689 10.3929749,9.81402755 10.3929749,10.0447755 Z" id="path-1"></path>
+    </defs>
+    <g id="Sound/General/Trim" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="Mask" fill="#575E75" xlink:href="#path-1"></use>
+        <g id="Blue/1_Blue" mask="url(#mask-2)" fill="#4D97FF">
+            <rect id="Primary-Blue" x="0" y="0" width="20" height="20"></rect>
+        </g>
+    </g>
+</svg>

src/components/sound-editor/icon--fade-in.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
+    <title>Sound/Effects/Fade-in</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sound/Effects/Fade-in" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M2,10.25 C1.86192881,10.25 1.75,10.1380712 1.75,10 C1.75,9.86192881 1.86192881,9.75 2,9.75 L7,9.75 C7.35324851,9.75 7.58270077,9.50876428 7.90437981,8.88536107 L8.04612021,8.6082292 C8.35582235,8.01071273 8.58718112,7.75 9,7.75 C9.3879427,7.75 9.64783618,7.89521764 10.0567568,8.24762061 L10.1299543,8.31093199 C10.5105228,8.64016497 10.7058526,8.75 11,8.75 C11.1999644,8.75 11.402585,8.39321162 11.7655628,7.41317141 C12.2359183,6.14321162 12.4592237,5.75 13,5.75 C13.4020616,5.75 13.6314717,5.8897049 13.9133418,6.21140451 C13.9679067,6.27426342 13.9973758,6.30824799 14.0201857,6.33390904 C14.2852046,6.63205537 14.5123572,6.75 15,6.75 C15.3765436,6.75 15.6926018,6.13162529 16.2628292,4.42094306 C16.9426018,2.38162529 17.2654325,1.75 18,1.75 C18.1380712,1.75 18.25,1.86192881 18.25,2 L18.25,18 C18.25,18.1380712 18.1380712,18.25 18,18.25 C17.2654325,18.25 16.9426018,17.6183747 16.2628292,15.5790569 C15.6926018,13.8683747 15.3765436,13.25 15,13.25 C14.5123572,13.25 14.2852046,13.3679446 14.0201857,13.666091 C13.9973758,13.691752 13.9679067,13.7257366 13.9133418,13.7885955 C13.6314717,14.1102951 13.4020616,14.25 13,14.25 C12.4592237,14.25 12.2359183,13.8567884 11.7655628,12.5868286 C11.402585,11.6067884 11.1999644,11.25 11,11.25 C10.7058526,11.25 10.5105228,11.359835 10.1299543,11.689068 L10.0567568,11.7523794 C9.64783618,12.1047824 9.3879427,12.25 9,12.25 C8.58718112,12.25 8.35582235,11.9892873 8.04612021,11.3917708 L7.90437981,11.1146389 C7.58270078,10.4912357 7.35324851,10.25 7.00000001,10.25 L2,10.25 Z" id="Path" fill="#CF63CF" fill-rule="nonzero"></path>
+    </g>
+</svg>

src/components/sound-editor/icon--fade-out.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
+    <title>Sound/Effects/Fade-out</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sound/Effects/Fade-out" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M13,10.25 C12.6467515,10.25 12.4172992,10.4912357 12.0956202,11.1146389 L11.9538798,11.3917708 C11.6441776,11.9892873 11.4128189,12.25 11,12.25 C10.6120573,12.25 10.3521638,12.1047824 9.94324322,11.7523794 L9.8700457,11.689068 C9.48947724,11.359835 9.29414743,11.25 9,11.25 C8.80003561,11.25 8.59741505,11.6067884 8.23443719,12.5868286 C7.76408171,13.8567884 7.54077635,14.25 7,14.25 C6.59793845,14.25 6.3685283,14.1102951 6.08665816,13.7885955 C6.03209329,13.7257366 6.00262416,13.691752 5.97981434,13.666091 C5.71479538,13.3679446 5.48764275,13.25 5,13.25 C4.62345642,13.25 4.30739824,13.8683747 3.73717082,15.5790569 C3.05739824,17.6183747 2.73456753,18.25 2,18.25 C1.86192881,18.25 1.75,18.1380712 1.75,18 L1.75,2 C1.75,1.86192881 1.86192881,1.75 2,1.75 C2.73456753,1.75 3.05739824,2.38162529 3.73717082,4.42094306 C4.30739824,6.13162529 4.62345642,6.75 5,6.75 C5.48764275,6.75 5.71479538,6.63205537 5.97981434,6.33390904 C6.00262416,6.30824799 6.03209329,6.27426342 6.08665816,6.21140451 C6.3685283,5.8897049 6.59793845,5.75 7,5.75 C7.54077635,5.75 7.76408171,6.14321162 8.23443719,7.41317141 C8.59741505,8.39321162 8.80003561,8.75 9,8.75 C9.29414743,8.75 9.48947724,8.64016497 9.8700457,8.31093199 L9.94324322,8.24762061 C10.3521638,7.89521764 10.6120573,7.75 11,7.75 C11.4128189,7.75 11.6441776,8.01071273 11.9538798,8.6082292 L12.0956202,8.88536107 C12.4172992,9.50876428 12.6467515,9.75 13,9.75 L18,9.75 C18.1380712,9.75 18.25,9.86192881 18.25,10 C18.25,10.1380712 18.1380712,10.25 18,10.25 L12.9999998,10.25 L13,10.25 Z" id="Path" fill="#CF63CF" fill-rule="nonzero"></path>
+    </g>
+</svg>

src/components/sound-editor/icon--lounder.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
-    <title>icon--lounder</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="lounder">
-            <g id="louder" transform="translate(2.000000, 3.000000)">
-                <path d="M7.54011246,2.3873625 L7.54011246,11.8531125 C7.54011246,12.2457375 7.22294659,12.5629875 6.83155041,12.5629875 L5.50777655,12.5629875 C5.2018577,12.5629875 4.9296799,12.3661125 4.83408026,12.0736125 C4.29422346,10.4266125 2.75788098,9.3128625 1.02471572,9.3128625 L0.709799251,9.3128625 C0.319527773,9.3128625 0.0001125,8.9933625 0.0001125,8.6029875 L0.0001125,5.6374875 C0.0001125,5.2471125 0.319527773,4.9276125 0.709799251,4.9276125 L1.02471572,4.9276125 C2.75788098,4.9276125 4.29422346,3.8138625 4.83408026,2.1668625 C4.9296799,1.8743625 5.2018577,1.6774875 5.50777655,1.6774875 L6.83155041,1.6774875 C7.22294659,1.6774875 7.54011246,1.9947375 7.54011246,2.3873625" id="Fill-1" fill="#CF63CF"></path>
-                <path d="M9.25,5.8645125 C9.9385,6.5541375 9.9385,7.6858875 9.25,8.3755125" id="Stroke-3" stroke="#CF63CF" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
-                <path d="M10.75,3.3541875 C12.829,5.4331875 12.829,8.8081875 10.75,10.8860625" id="Stroke-5" stroke="#CF63CF" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
-                <path d="M12.5,0.8438625 C15.968375,4.3111125 15.968375,9.9293625 12.5,13.3966125" id="Stroke-7" stroke="#CF63CF" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
-            </g>
-        </g>
-    </g>
-</svg>

src/components/sound-editor/icon--mute.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Sound/Effects/Mute</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sound/Effects/Mute" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path fill="#CF63CF" d="M13.4541749,5.04815243 L15.6281168,2.87421054 C15.92101,2.58131732 16.3958837,2.58131732 16.688777,2.87421054 C16.9816702,3.16710376 16.9816702,3.64197749 16.688777,3.93487071 L4.53033009,16.0933176 C4.23743687,16.3862108 3.76256313,16.3862108 3.46966991,16.0933176 C3.1767767,15.8004244 3.1767767,15.3255506 3.46966991,15.0326574 L6.31214932,12.190178 C6.1241191,12.0621379 6,11.8463331 6,11.6029875 L6,8.6374875 C6,8.2471125 6.31941527,7.9276125 6.70968675,7.9276125 L7.02460322,7.9276125 C8.75776848,7.9276125 10.294111,6.8138625 10.8339678,5.1668625 C10.9295674,4.8743625 11.2017452,4.6774875 11.5076641,4.6774875 L12.8314379,4.6774875 C13.1002844,4.6774875 13.3341075,4.82717208 13.4541749,5.04815243 Z M13.54,9.08364771 L13.54,14.8531125 C13.54,15.2457375 13.2228341,15.5629875 12.8314379,15.5629875 L11.5076641,15.5629875 C11.2017452,15.5629875 10.9295674,15.3661125 10.8339678,15.0736125 C10.5773785,14.2908077 10.0956813,13.628465 9.47473531,13.1489124 L13.54,9.08364771 Z" id="path-1"></path>
+    </g>
+</svg>

src/components/sound-editor/icon--paste.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.1 (81669) - https://sketch.com -->
+    <title>Sound/General/Paste</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sound/General/Paste" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M2.39776184,8.69699508 C2.82037272,8.57348907 3.12697047,8.23068036 3.44607843,7.63235294 C3.50283588,7.52593273 3.70653958,7.12084014 3.75472041,7.03050109 C4.03665487,6.50187397 4.27845388,6.25 4.66666667,6.25 C5.08719776,6.25 5.31070056,6.3254322 5.67812087,6.53210612 C5.97736723,6.7004322 6.1242348,6.75 6.44444444,6.75 C6.611898,6.75 6.70455317,6.61444047 6.85968251,6.13575567 C6.89349476,6.03068757 6.91177802,5.97409653 6.92949584,5.92094306 C7.19192893,5.1336438 7.51873661,4.75 8.22222222,4.75 C8.89163675,4.75 9.21925695,5.04485818 9.76356813,5.86132495 C10.2192569,6.54485818 10.4471923,6.75 10.8888889,6.75 C11.3661624,6.75 11.5487705,6.64281697 11.7364319,6.36132495 C11.7692531,6.31129826 11.7692531,6.31129826 11.8038172,6.25761214 C12.0332099,5.90369189 12.2433073,5.75 12.6666667,5.75 C13.1851992,5.75 13.4061497,6.04828312 13.7840084,6.89846538 C14.0728163,7.54828312 14.2222362,7.75 14.4444444,7.75 C14.7687569,7.75 14.9402848,7.69488783 15.2489243,7.52961059 L15.2905031,7.50732887 C15.6361057,7.32238348 15.857036,7.25 16.2222222,7.25 C16.6365912,7.25 16.8489777,7.46586974 17.1158999,7.96477614 C17.1606386,8.04903257 17.1606386,8.04903257 17.2045543,8.13123692 C17.3511621,8.40280419 17.4762139,8.57093888 17.631381,8.6621791 C17.7227849,8.5624959 17.8540941,8.5 18,8.5 C18.2761424,8.5 18.5,8.72385763 18.5,9 C18.5,9.27614237 18.2761424,9.5 18,9.5 C17.8540941,9.5 17.7227849,9.4375041 17.631381,9.3378209 C17.4762139,9.42906112 17.3511621,9.59719581 17.2045543,9.86876308 C17.1606386,9.95096743 17.1606386,9.95096743 17.1158999,10.0352239 C16.8489777,10.5341303 16.6365912,10.75 16.2222222,10.75 C15.857036,10.75 15.6361057,10.6776165 15.2905031,10.4926711 L15.2489243,10.4703894 C14.9402848,10.3051122 14.7687569,10.25 14.4444444,10.25 C14.2222362,10.25 14.0728163,10.4517169 13.7840084,11.1015346 C13.4061497,11.9517169 13.1851992,12.25 12.6666667,12.25 C12.2433073,12.25 12.0332099,12.0963081 11.8038172,11.7423879 C11.7692531,11.6887017 11.7692531,11.6887017 11.7364319,11.638675 C11.5487705,11.357183 11.3661624,11.25 10.8888889,11.25 C10.4471923,11.25 10.2192569,11.4551418 9.76356813,12.138675 C9.21925695,12.9551418 8.89163675,13.25 8.22222222,13.25 C7.51873661,13.25 7.19192893,12.8663562 6.92949584,12.0790569 C6.91177802,12.0259035 6.89349476,11.9693124 6.85968251,11.8642443 C6.70455317,11.3855595 6.611898,11.25 6.44444444,11.25 C6.1242348,11.25 5.97736723,11.2995678 5.67812087,11.4678939 C5.31070056,11.6745678 5.08719776,11.75 4.66666667,11.75 C4.2576716,11.75 4.07414298,11.4976192 3.8822771,10.9321841 L3.78515608,10.639352 C3.74630783,10.5239258 3.71290663,10.4315854 3.67737933,10.3436452 C3.42795496,9.72624902 3.07265238,9.37546644 2.4155666,9.27813036 C2.32583908,9.41193093 2.17320436,9.5 2,9.5 C1.72385763,9.5 1.5,9.27614237 1.5,9 C1.5,8.72385763 1.72385763,8.5 2,8.5 C2.16222865,8.5 2.306412,8.5772611 2.39776184,8.69699508 Z M9,15 L9.7763932,13.4472136 C9.80058413,13.3988317 9.83981475,13.3596011 9.8881966,13.3354102 C10.0116912,13.2736629 10.1618595,13.323719 10.2236068,13.4472136 L11,15 L12,15 C12.2761424,15 12.5,15.2238576 12.5,15.5 C12.5,15.6081851 12.4649111,15.7134519 12.4,15.8 L10.4,18.4666667 C10.2343146,18.6875806 9.9209139,18.7323521 9.7,18.5666667 C9.66209717,18.5382395 9.62842712,18.5045695 9.6,18.4666667 L7.6,15.8 C7.43431458,15.5790861 7.4790861,15.2656854 7.7,15.1 C7.78654809,15.0350889 7.89181489,15 8,15 L9,15 L9,15 Z M2,3.5 C1.72385763,3.5 1.5,3.27614237 1.5,3 C1.5,2.72385763 1.72385763,2.5 2,2.5 C2.27614237,2.5 2.5,2.72385763 2.5,3 C2.5,3.27614237 2.27614237,3.5 2,3.5 Z M4,3.5 C3.72385763,3.5 3.5,3.27614237 3.5,3 C3.5,2.72385763 3.72385763,2.5 4,2.5 C4.27614237,2.5 4.5,2.72385763 4.5,3 C4.5,3.27614237 4.27614237,3.5 4,3.5 Z M6,3.5 C5.72385763,3.5 5.5,3.27614237 5.5,3 C5.5,2.72385763 5.72385763,2.5 6,2.5 C6.27614237,2.5 6.5,2.72385763 6.5,3 C6.5,3.27614237 6.27614237,3.5 6,3.5 Z M8,3.5 C7.72385763,3.5 7.5,3.27614237 7.5,3 C7.5,2.72385763 7.72385763,2.5 8,2.5 C8.27614237,2.5 8.5,2.72385763 8.5,3 C8.5,3.27614237 8.27614237,3.5 8,3.5 Z M10,3.5 C9.72385763,3.5 9.5,3.27614237 9.5,3 C9.5,2.72385763 9.72385763,2.5 10,2.5 C10.2761424,2.5 10.5,2.72385763 10.5,3 C10.5,3.27614237 10.2761424,3.5 10,3.5 Z M12,3.5 C11.7238576,3.5 11.5,3.27614237 11.5,3 C11.5,2.72385763 11.7238576,2.5 12,2.5 C12.2761424,2.5 12.5,2.72385763 12.5,3 C12.5,3.27614237 12.2761424,3.5 12,3.5 Z M14,3.5 C13.7238576,3.5 13.5,3.27614237 13.5,3 C13.5,2.72385763 13.7238576,2.5 14,2.5 C14.2761424,2.5 14.5,2.72385763 14.5,3 C14.5,3.27614237 14.2761424,3.5 14,3.5 Z M16,3.5 C15.7238576,3.5 15.5,3.27614237 15.5,3 C15.5,2.72385763 15.7238576,2.5 16,2.5 C16.2761424,2.5 16.5,2.72385763 16.5,3 C16.5,3.27614237 16.2761424,3.5 16,3.5 Z M18,3.5 C17.7238576,3.5 17.5,3.27614237 17.5,3 C17.5,2.72385763 17.7238576,2.5 18,2.5 C18.2761424,2.5 18.5,2.72385763 18.5,3 C18.5,3.27614237 18.2761424,3.5 18,3.5 Z M18,5.5 C17.7238576,5.5 17.5,5.27614237 17.5,5 C17.5,4.72385763 17.7238576,4.5 18,4.5 C18.2761424,4.5 18.5,4.72385763 18.5,5 C18.5,Line truncated
+    </g>
+</svg>

src/components/sound-editor/icon--play.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="49px" height="52px" viewBox="-5 0 49 48" 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>play</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M17.2214651,8.34499443 C19.7766419,4.08636653 23.9234057,4.09303946 26.4745787,8.34499443 L40.1520974,31.140859 C42.7072741,35.3994869 40.7489672,38.8517869 35.7726637,38.8517869 L7.92338006,38.8517869 C2.9495089,38.8517869 0.992773429,35.392814 3.54394641,31.140859 L17.2214651,8.34499443 Z" id="path-1"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop---1280x720" transform="translate(-623.000000, -347.000000)">
+            <g id="Step-3---Altering-Suggested-Trim" transform="translate(0.000000, 42.000000)">
+                <g id="Play-/-Record-/-Stop" transform="translate(623.000000, 307.000000)">
+                    <g id="play" transform="translate(21.849131, 22.002656) rotate(90.000000) translate(-21.849131, -22.002656) ">
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/sound-editor/icon--stop.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="52px" height="52px" viewBox="0 0 52 52" 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>stop-playback</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="44" height="44" rx="4"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop---1280x720" transform="translate(-619.000000, -345.000000)">
+            <g id="Step-4---Playing-Trim" transform="translate(0.000000, 42.000000)">
+                <g id="Play-/-Record-/-Stop" transform="translate(623.000000, 307.000000)">
+                    <g id="stop-playback">
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        <rect stroke="#FFFFFF" stroke-width="1" x="0.5" y="0.5" width="43" height="43" rx="4"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/sound-editor/sound-editor.css

@@ -63,7 +63,9 @@
     background: hsla(300, 53%, 60%, 0.15);
     border: 1px solid $ui-black-transparent;
     border-radius: 5px;
-    padding: 3px;
+
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 $border-radius: 0.25rem;
@@ -93,9 +95,9 @@ $border-radius: 0.25rem;
     height: 3rem;
     width: 3rem;
     outline: none;
-    background: white;
+    background: $motion-primary;
     border-radius: 100%;
-    border: 1px solid $ui-black-transparent;
+    border: 4px solid $ui-white-dim;
     cursor: pointer;
     padding: 0.75rem;
     user-select: none;
@@ -118,6 +120,7 @@ $border-radius: 0.25rem;
     color: $text-primary;
     font-size: 0.625rem;
     user-select: none;
+
 }
 
 [dir="ltr"] .trim-button {
@@ -130,7 +133,6 @@ $border-radius: 0.25rem;
 
 .trim-button > img {
     width: 1.25rem;
-    margin-bottom: -0.375rem;
 }
 
 .effect-button {
@@ -138,6 +140,7 @@ $border-radius: 0.25rem;
     color: $text-primary;
     font-size: 0.625rem;
     user-select: none;
+    padding: 0.25rem 0;
 }
 
 .effect-button + .effect-button {
@@ -150,12 +153,25 @@ $border-radius: 0.25rem;
     margin-bottom: -0.375rem;
 }
 
-/* mirror the louder/softer speaker icons when rtl */
-[dir="rtl"] .effect-button:nth-of-type(6) img {
-    transform: scaleX(-1);
+.tool-button {
+    flex-basis: 60px;
+    color: $text-primary;
+    font-size: 0.625rem;
+    user-select: none;
+    padding: 0.25rem 0;
 }
 
-[dir="rtl"] .effect-button:nth-of-type(7) img {
+.tool-button + .tool-button {
+    margin: 0;
+}
+
+.tool-button img {
+    width: 4rem;
+    height: 1.5rem;
+    margin-bottom: -0.375rem;
+}
+
+[dir="rtl"] .flip-in-rtl img {
     transform: scaleX(-1);
 }
 
@@ -167,6 +183,10 @@ $border-radius: 0.25rem;
     margin-right: 1rem;
 }
 
+.button-group {
+    display: flex;
+}
+
 .button-group .button {
     border-radius: 0;
 }

src/components/sound-editor/sound-editor.jsx

@@ -8,24 +8,29 @@ import Label from '../forms/label.jsx';
 import Input from '../forms/input.jsx';
 
 import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
-import AudioTrimmer from '../../containers/audio-trimmer.jsx';
+import AudioSelector from '../../containers/audio-selector.jsx';
 import IconButton from '../icon-button/icon-button.jsx';
 
 import styles from './sound-editor.css';
 
-import playIcon from '../record-modal/icon--play.svg';
-import stopIcon from '../record-modal/icon--stop-playback.svg';
-import trimIcon from './icon--trim.svg';
-import trimConfirmIcon from './icon--trim-confirm.svg';
+import playIcon from './icon--play.svg';
+import stopIcon from './icon--stop.svg';
 import redoIcon from './icon--redo.svg';
 import undoIcon from './icon--undo.svg';
-import echoIcon from './icon--echo.svg';
 import fasterIcon from './icon--faster.svg';
 import slowerIcon from './icon--slower.svg';
 import louderIcon from './icon--louder.svg';
 import softerIcon from './icon--softer.svg';
 import robotIcon from './icon--robot.svg';
 import reverseIcon from './icon--reverse.svg';
+import fadeOutIcon from './icon--fade-out.svg';
+import fadeInIcon from './icon--fade-in.svg';
+import muteIcon from './icon--mute.svg';
+
+import deleteIcon from './icon--delete.svg';
+import copyIcon from './icon--copy.svg';
+import pasteIcon from './icon--paste.svg';
+import copyToNewIcon from './icon--copy-to-new.svg';
 
 const BufferedInput = BufferedInputHOC(Input);
 
@@ -45,10 +50,25 @@ const messages = defineMessages({
         description: 'Title of the button to stop the sound',
         defaultMessage: 'Stop'
     },
-    trim: {
-        id: 'gui.soundEditor.trim',
-        description: 'Title of the button to start trimminging the sound',
-        defaultMessage: 'Trim'
+    copy: {
+        id: 'gui.soundEditor.copy',
+        description: 'Title of the button to copy the sound',
+        defaultMessage: 'Copy'
+    },
+    paste: {
+        id: 'gui.soundEditor.paste',
+        description: 'Title of the button to paste the sound',
+        defaultMessage: 'Paste'
+    },
+    copyToNew: {
+        id: 'gui.soundEditor.copyToNew',
+        description: 'Title of the button to copy the selection into a new sound',
+        defaultMessage: 'Copy to New'
+    },
+    delete: {
+        id: 'gui.soundEditor.delete',
+        description: 'Title of the button to delete the sound',
+        defaultMessage: 'Delete'
     },
     save: {
         id: 'gui.soundEditor.save',
@@ -99,11 +119,30 @@ const messages = defineMessages({
         id: 'gui.soundEditor.reverse',
         description: 'Title of the button to apply the reverse effect',
         defaultMessage: 'Reverse'
+    },
+    fadeOut: {
+        id: 'gui.soundEditor.fadeOut',
+        description: 'Title of the button to apply the fade out effect',
+        defaultMessage: 'Fade out'
+    },
+    fadeIn: {
+        id: 'gui.soundEditor.fadeIn',
+        description: 'Title of the button to apply the fade in effect',
+        defaultMessage: 'Fade in'
+    },
+    mute: {
+        id: 'gui.soundEditor.mute',
+        description: 'Title of the button to apply the mute effect',
+        defaultMessage: 'Mute'
     }
 });
 
 const SoundEditor = props => (
-    <div className={styles.editorContainer}>
+    <div
+        className={styles.editorContainer}
+        ref={props.setRef}
+        onMouseDown={props.onContainerClick}
+    >
         <div className={styles.row}>
             <div className={styles.inputGroup}>
                 <Label text={props.intl.formatMessage(messages.sound)}>
@@ -141,17 +180,33 @@ const SoundEditor = props => (
                     </button>
                 </div>
             </div>
+            <div className={styles.inputGroup}>
+                <IconButton
+                    className={styles.toolButton}
+                    img={copyIcon}
+                    title={props.intl.formatMessage(messages.copy)}
+                    onClick={props.onCopy}
+                />
+                <IconButton
+                    className={styles.toolButton}
+                    disabled={props.canPaste === false}
+                    img={pasteIcon}
+                    title={props.intl.formatMessage(messages.paste)}
+                    onClick={props.onPaste}
+                />
+                <IconButton
+                    className={classNames(styles.toolButton, styles.flipInRtl)}
+                    img={copyToNewIcon}
+                    title={props.intl.formatMessage(messages.copyToNew)}
+                    onClick={props.onCopyToNew}
+                />
+            </div>
             <IconButton
-                className={classNames(styles.trimButton, {
-                    [styles.trimButtonActive]: props.trimStart !== null
-                })}
-                img={props.trimStart === null ? trimIcon : trimConfirmIcon}
-                title={props.trimStart === null ? (
-                    <FormattedMessage {...messages.trim} />
-                ) : (
-                    <FormattedMessage {...messages.save} />
-                )}
-                onClick={props.onActivateTrim}
+                className={styles.toolButton}
+                disabled={props.trimStart === null}
+                img={deleteIcon}
+                title={props.intl.formatMessage(messages.delete)}
+                onClick={props.onDelete}
             />
         </div>
         <div className={styles.row}>
@@ -161,12 +216,13 @@ const SoundEditor = props => (
                     height={160}
                     width={600}
                 />
-                <AudioTrimmer
+                <AudioSelector
                     playhead={props.playhead}
                     trimEnd={props.trimEnd}
                     trimStart={props.trimStart}
-                    onSetTrimEnd={props.onSetTrimEnd}
-                    onSetTrimStart={props.onSetTrimStart}
+                    onPlay={props.onPlay}
+                    onSetTrim={props.onSetTrim}
+                    onStop={props.onStop}
                 />
             </div>
         </div>
@@ -209,61 +265,81 @@ const SoundEditor = props => (
                 onClick={props.onSlower}
             />
             <IconButton
-                className={styles.effectButton}
-                img={echoIcon}
-                title={<FormattedMessage {...messages.echo} />}
-                onClick={props.onEcho}
-            />
-            <IconButton
-                className={styles.effectButton}
-                img={robotIcon}
-                title={<FormattedMessage {...messages.robot} />}
-                onClick={props.onRobot}
-            />
-            <IconButton
-                className={styles.effectButton}
+                className={classNames(styles.effectButton, styles.flipInRtl)}
                 img={louderIcon}
                 title={<FormattedMessage {...messages.louder} />}
                 onClick={props.onLouder}
             />
             <IconButton
-                className={styles.effectButton}
+                className={classNames(styles.effectButton, styles.flipInRtl)}
                 img={softerIcon}
                 title={<FormattedMessage {...messages.softer} />}
                 onClick={props.onSofter}
             />
+            <IconButton
+                className={classNames(styles.effectButton, styles.flipInRtl)}
+                img={muteIcon}
+                title={<FormattedMessage {...messages.mute} />}
+                onClick={props.onMute}
+            />
+            <IconButton
+                className={styles.effectButton}
+                img={fadeInIcon}
+                title={<FormattedMessage {...messages.fadeIn} />}
+                onClick={props.onFadeIn}
+            />
+            <IconButton
+                className={styles.effectButton}
+                img={fadeOutIcon}
+                title={<FormattedMessage {...messages.fadeOut} />}
+                onClick={props.onFadeOut}
+            />
             <IconButton
                 className={styles.effectButton}
                 img={reverseIcon}
                 title={<FormattedMessage {...messages.reverse} />}
                 onClick={props.onReverse}
             />
+            <IconButton
+                className={styles.effectButton}
+                img={robotIcon}
+                title={<FormattedMessage {...messages.robot} />}
+                onClick={props.onRobot}
+            />
         </div>
     </div>
 );
 
 SoundEditor.propTypes = {
+    canPaste: PropTypes.bool.isRequired,
     canRedo: PropTypes.bool.isRequired,
     canUndo: PropTypes.bool.isRequired,
     chunkLevels: PropTypes.arrayOf(PropTypes.number).isRequired,
     intl: intlShape,
     name: PropTypes.string.isRequired,
-    onActivateTrim: PropTypes.func,
     onChangeName: PropTypes.func.isRequired,
+    onContainerClick: PropTypes.func.isRequired,
+    onCopy: PropTypes.func.isRequired,
+    onCopyToNew: PropTypes.func.isRequired,
+    onDelete: PropTypes.func,
     onEcho: PropTypes.func.isRequired,
+    onFadeIn: PropTypes.func.isRequired,
+    onFadeOut: PropTypes.func.isRequired,
     onFaster: PropTypes.func.isRequired,
     onLouder: PropTypes.func.isRequired,
+    onMute: PropTypes.func.isRequired,
+    onPaste: PropTypes.func.isRequired,
     onPlay: PropTypes.func.isRequired,
     onRedo: PropTypes.func.isRequired,
     onReverse: PropTypes.func.isRequired,
     onRobot: PropTypes.func.isRequired,
-    onSetTrimEnd: PropTypes.func,
-    onSetTrimStart: PropTypes.func,
+    onSetTrim: PropTypes.func,
     onSlower: PropTypes.func.isRequired,
     onSofter: PropTypes.func.isRequired,
     onStop: PropTypes.func.isRequired,
     onUndo: PropTypes.func.isRequired,
     playhead: PropTypes.number,
+    setRef: PropTypes.func,
     trimEnd: PropTypes.number,
     trimStart: PropTypes.number
 };

src/components/sprite-selector-item/sprite-selector-item.css

@@ -94,16 +94,16 @@
 
 .delete-button {
     position: absolute;
-    top: 0.125rem;
+    top: -.625rem;
     z-index: auto;
 }
 
 [dir="ltr"] .delete-button {
-    right: 0.125rem;
+    right: -.625rem;
 }
 
 [dir="rtl"] .delete-button {
-    left: 0.125rem;
+    left: -.625rem;
 }
 
 .number {

src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import CloseButton from '../close-button/close-button.jsx';
+import DeleteButton from '../delete-button/delete-button.jsx';
 import styles from './sprite-selector-item.css';
 import {ContextMenuTrigger} from 'react-contextmenu';
 import {DangerousMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
@@ -48,9 +48,8 @@ const SpriteSelectorItem = props => (
             ) : null}
         </div>
         {(props.selected && props.onDeleteButtonClick) ? (
-            <CloseButton
+            <DeleteButton
                 className={styles.deleteButton}
-                size={CloseButton.SIZE_SMALL}
                 onClick={props.onDeleteButtonClick}
             />
         ) : null }

src/components/waveform/waveform.jsx

@@ -19,17 +19,21 @@ class Waveform extends React.PureComponent {
         // composite time when animating the playhead
         const takeEveryN = Math.ceil(data.length / width);
 
-        const filteredData = takeEveryN === 1 ? data :
+        const filteredData = takeEveryN === 1 ? data.slice(0) :
             data.filter((_, i) => i % takeEveryN === 0);
 
-        const cappedData = [0, ...filteredData, 0];
+        // Need at least two points to render waveform.
+        if (filteredData.length === 1) {
+            filteredData.push(filteredData[0]);
+        }
 
+        const maxIndex = filteredData.length - 1;
         const points = [
-            ...cappedData.map((v, i) =>
-                [width * i / cappedData.length, height * v / 2]
+            ...filteredData.map((v, i) =>
+                [width * (i / maxIndex), height * v / 2]
             ),
-            ...cappedData.reverse().map((v, i) =>
-                [width * (cappedData.length - i - 1) / cappedData.length, -height * v / 2]
+            ...filteredData.reverse().map((v, i) =>
+                [width * (1 - (i / maxIndex)), -height * v / 2]
             )
         ];
         const pathComponents = points.map(([x, y], i) => {
@@ -40,15 +44,8 @@ class Waveform extends React.PureComponent {
         return (
             <svg
                 className={styles.container}
-                viewBox={`-1 0 ${width} ${height}`}
+                viewBox={`0 0 ${width} ${height}`}
             >
-                <line
-                    className={styles.baseline}
-                    x1={-1}
-                    x2={width}
-                    y1={height / 2}
-                    y2={height / 2}
-                />
                 <g transform={`scale(1, -1) translate(0, -${height / 2})`}>
                     <path
                         className={styles.waveformPath}

src/containers/audio-selector.jsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
+import AudioSelectorComponent from '../components/audio-trimmer/audio-selector.jsx';
+import {getEventXY} from '../lib/touch-utils';
+import DragRecognizer from '../lib/drag-recognizer';
+
+const MIN_LENGTH = 0.01;
+const MIN_DURATION = 500;
+
+class AudioSelector extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleNewSelectionMouseDown',
+            'handleTrimStartMouseDown',
+            'handleTrimEndMouseDown',
+            'handleTrimStartMouseMove',
+            'handleTrimEndMouseMove',
+            'handleTrimStartMouseUp',
+            'handleTrimEndMouseUp',
+            'storeRef'
+        ]);
+
+        this.state = {
+            trimStart: props.trimStart,
+            trimEnd: props.trimEnd
+        };
+
+        this.clickStartTime = 0;
+
+        this.trimStartDragRecognizer = new DragRecognizer({
+            onDrag: this.handleTrimStartMouseMove,
+            onDragEnd: this.handleTrimStartMouseUp,
+            touchDragAngle: 90,
+            distanceThreshold: 0
+        });
+        this.trimEndDragRecognizer = new DragRecognizer({
+            onDrag: this.handleTrimEndMouseMove,
+            onDragEnd: this.handleTrimEndMouseUp,
+            touchDragAngle: 90,
+            distanceThreshold: 0
+        });
+    }
+    componentWillReceiveProps (newProps) {
+        const {trimStart, trimEnd} = this.props;
+        if (newProps.trimStart === trimStart && newProps.trimEnd === trimEnd) return;
+        this.setState({
+            trimStart: newProps.trimStart,
+            trimEnd: newProps.trimEnd
+        });
+    }
+    clearSelection () {
+        this.props.onSetTrim(null, null);
+    }
+    handleNewSelectionMouseDown (e) {
+        const {width, left} = this.containerElement.getBoundingClientRect();
+        this.initialTrimEnd = (getEventXY(e).x - left) / width;
+        this.initialTrimStart = this.initialTrimEnd;
+        this.props.onSetTrim(this.initialTrimStart, this.initialTrimEnd);
+
+        this.clickStartTime = Date.now();
+
+        this.containerSize = width;
+        this.trimEndDragRecognizer.start(e);
+
+        e.preventDefault();
+    }
+    handleTrimStartMouseMove (currentOffset, initialOffset) {
+        const dx = (currentOffset.x - initialOffset.x) / this.containerSize;
+        const newTrim = Math.max(0, Math.min(1, this.initialTrimStart + dx));
+        if (newTrim > this.initialTrimEnd) {
+            this.setState({
+                trimStart: this.initialTrimEnd,
+                trimEnd: newTrim
+            });
+        } else {
+            this.setState({
+                trimStart: newTrim,
+                trimEnd: this.initialTrimEnd
+            });
+        }
+    }
+    handleTrimEndMouseMove (currentOffset, initialOffset) {
+        const dx = (currentOffset.x - initialOffset.x) / this.containerSize;
+        const newTrim = Math.min(1, Math.max(0, this.initialTrimEnd + dx));
+        if (newTrim < this.initialTrimStart) {
+            this.setState({
+                trimStart: newTrim,
+                trimEnd: this.initialTrimStart
+            });
+        } else {
+            this.setState({
+                trimStart: this.initialTrimStart,
+                trimEnd: newTrim
+            });
+        }
+    }
+    handleTrimStartMouseUp () {
+        this.props.onSetTrim(this.state.trimStart, this.state.trimEnd);
+    }
+    handleTrimEndMouseUp () {
+        // If the selection was made quickly (tooFast) and is small (tooShort),
+        // deselect instead. This allows click-to-deselect even if you drag
+        // a little bit by accident. It also allows very quickly making a
+        // selection, as long as it is above a minimum length.
+        const tooFast = (Date.now() - this.clickStartTime) < MIN_DURATION;
+        const tooShort = (this.state.trimEnd - this.state.trimStart) < MIN_LENGTH;
+        if (tooFast && tooShort) {
+            this.clearSelection();
+        } else {
+            this.props.onSetTrim(this.state.trimStart, this.state.trimEnd);
+        }
+    }
+    handleTrimStartMouseDown (e) {
+        this.containerSize = this.containerElement.getBoundingClientRect().width;
+        this.trimStartDragRecognizer.start(e);
+        this.initialTrimStart = this.props.trimStart;
+        this.initialTrimEnd = this.props.trimEnd;
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    handleTrimEndMouseDown (e) {
+        this.containerSize = this.containerElement.getBoundingClientRect().width;
+        this.trimEndDragRecognizer.start(e);
+        this.initialTrimEnd = this.props.trimEnd;
+        this.initialTrimStart = this.props.trimStart;
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    storeRef (el) {
+        this.containerElement = el;
+    }
+    render () {
+        return (
+            <AudioSelectorComponent
+                containerRef={this.storeRef}
+                playhead={this.props.playhead}
+                trimEnd={this.state.trimEnd}
+                trimStart={this.state.trimStart}
+                onNewSelectionMouseDown={this.handleNewSelectionMouseDown}
+                onTrimEndMouseDown={this.handleTrimEndMouseDown}
+                onTrimStartMouseDown={this.handleTrimStartMouseDown}
+            />
+        );
+    }
+}
+
+AudioSelector.propTypes = {
+    onSetTrim: PropTypes.func,
+    playhead: PropTypes.number,
+    trimEnd: PropTypes.number,
+    trimStart: PropTypes.number
+};
+
+export default AudioSelector;

src/containers/audio-trimmer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import bindAll from 'lodash.bindall';
 import AudioTrimmerComponent from '../components/audio-trimmer/audio-trimmer.jsx';
-import {getEventXY} from '../lib/touch-utils';
+import DragRecognizer from '../lib/drag-recognizer';
 
 const MIN_LENGTH = 0.01; // Used to stop sounds being trimmed smaller than 1%
 
@@ -14,52 +14,43 @@ class AudioTrimmer extends React.Component {
             'handleTrimEndMouseDown',
             'handleTrimStartMouseMove',
             'handleTrimEndMouseMove',
-            'handleTrimStartMouseUp',
-            'handleTrimEndMouseUp',
             'storeRef'
         ]);
+        this.trimStartDragRecognizer = new DragRecognizer({
+            onDrag: this.handleTrimStartMouseMove,
+            touchDragAngle: 90,
+            distanceThreshold: 0
+        });
+        this.trimEndDragRecognizer = new DragRecognizer({
+            onDrag: this.handleTrimEndMouseMove,
+            touchDragAngle: 90,
+            distanceThreshold: 0
+        });
+
     }
-    handleTrimStartMouseMove (e) {
-        const containerSize = this.containerElement.getBoundingClientRect().width;
-        const dx = (getEventXY(e).x - this.initialX) / containerSize;
+    handleTrimStartMouseMove (currentOffset, initialOffset) {
+        const dx = (currentOffset.x - initialOffset.x) / this.containerSize;
         const newTrim = Math.max(0, Math.min(this.props.trimEnd - MIN_LENGTH, this.initialTrim + dx));
         this.props.onSetTrimStart(newTrim);
-        e.preventDefault();
     }
-    handleTrimEndMouseMove (e) {
-        const containerSize = this.containerElement.getBoundingClientRect().width;
-        const dx = (getEventXY(e).x - this.initialX) / containerSize;
+    handleTrimEndMouseMove (currentOffset, initialOffset) {
+        const dx = (currentOffset.x - initialOffset.x) / this.containerSize;
         const newTrim = Math.min(1, Math.max(this.props.trimStart + MIN_LENGTH, this.initialTrim + dx));
         this.props.onSetTrimEnd(newTrim);
-        e.preventDefault();
-    }
-    handleTrimStartMouseUp () {
-        window.removeEventListener('mousemove', this.handleTrimStartMouseMove);
-        window.removeEventListener('mouseup', this.handleTrimStartMouseUp);
-        window.removeEventListener('touchmove', this.handleTrimStartMouseMove);
-        window.removeEventListener('touchend', this.handleTrimStartMouseUp);
-    }
-    handleTrimEndMouseUp () {
-        window.removeEventListener('mousemove', this.handleTrimEndMouseMove);
-        window.removeEventListener('mouseup', this.handleTrimEndMouseUp);
-        window.removeEventListener('touchmove', this.handleTrimEndMouseMove);
-        window.removeEventListener('touchend', this.handleTrimEndMouseUp);
     }
     handleTrimStartMouseDown (e) {
-        this.initialX = getEventXY(e).x;
+        this.containerSize = this.containerElement.getBoundingClientRect().width;
+        this.trimStartDragRecognizer.start(e);
         this.initialTrim = this.props.trimStart;
-        window.addEventListener('mousemove', this.handleTrimStartMouseMove);
-        window.addEventListener('mouseup', this.handleTrimStartMouseUp);
-        window.addEventListener('touchmove', this.handleTrimStartMouseMove);
-        window.addEventListener('touchend', this.handleTrimStartMouseUp);
+        e.stopPropagation();
+        e.preventDefault();
     }
     handleTrimEndMouseDown (e) {
-        this.initialX = getEventXY(e).x;
+        this.containerSize = this.containerElement.getBoundingClientRect().width;
+        this.trimEndDragRecognizer.start(e);
         this.initialTrim = this.props.trimEnd;
-        window.addEventListener('mousemove', this.handleTrimEndMouseMove);
-        window.addEventListener('mouseup', this.handleTrimEndMouseUp);
-        window.addEventListener('touchmove', this.handleTrimEndMouseMove);
-        window.addEventListener('touchend', this.handleTrimEndMouseUp);
+        e.stopPropagation();
+        e.preventDefault();
     }
     storeRef (el) {
         this.containerElement = el;

src/containers/library-item.jsx

@@ -15,6 +15,8 @@ class LibraryItem extends React.PureComponent {
             'handleKeyPress',
             'handleMouseEnter',
             'handleMouseLeave',
+            'handlePlay',
+            'handleStop',
             'rotateIcon',
             'startRotatingIcons',
             'stopRotatingIcons'
@@ -37,7 +39,9 @@ class LibraryItem extends React.PureComponent {
         e.preventDefault();
     }
     handleFocus (id) {
-        this.handleMouseEnter(id);
+        if (!this.props.showPlayButton) {
+            this.handleMouseEnter(id);
+        }
     }
     handleKeyPress (e) {
         if (e.key === ' ' || e.key === 'Enter') {
@@ -46,22 +50,34 @@ class LibraryItem extends React.PureComponent {
         }
     }
     handleMouseEnter () {
-        this.props.onMouseEnter(this.props.id);
-        if (this.props.icons && this.props.icons.length) {
-            this.stopRotatingIcons();
-            this.setState({
-                isRotatingIcon: true
-            }, this.startRotatingIcons);
+        // only show hover effects on the item if not showing a play button
+        if (!this.props.showPlayButton) {
+            this.props.onMouseEnter(this.props.id);
+            if (this.props.icons && this.props.icons.length) {
+                this.stopRotatingIcons();
+                this.setState({
+                    isRotatingIcon: true
+                }, this.startRotatingIcons);
+            }
         }
     }
     handleMouseLeave () {
-        this.props.onMouseLeave(this.props.id);
-        if (this.props.icons && this.props.icons.length) {
-            this.setState({
-                isRotatingIcon: false
-            }, this.stopRotatingIcons);
+        // only show hover effects on the item if not showing a play button
+        if (!this.props.showPlayButton) {
+            this.props.onMouseLeave(this.props.id);
+            if (this.props.icons && this.props.icons.length) {
+                this.setState({
+                    isRotatingIcon: false
+                }, this.stopRotatingIcons);
+            }
         }
     }
+    handlePlay () {
+        this.props.onMouseEnter(this.props.id);
+    }
+    handleStop () {
+        this.props.onMouseLeave(this.props.id);
+    }
     startRotatingIcons () {
         this.rotateIcon();
         this.intervalId = setInterval(this.rotateIcon, 300);
@@ -75,21 +91,17 @@ class LibraryItem extends React.PureComponent {
         const nextIconIndex = (this.state.iconIndex + 1) % this.props.icons.length;
         this.setState({iconIndex: nextIconIndex});
     }
-    curIconMd5 () {
+    curIconSource () {
         if (this.props.icons &&
             this.state.isRotatingIcon &&
             this.state.iconIndex < this.props.icons.length &&
-            this.props.icons[this.state.iconIndex] &&
-            this.props.icons[this.state.iconIndex].baseLayerMD5) {
-            return this.props.icons[this.state.iconIndex].baseLayerMD5;
+            this.props.icons[this.state.iconIndex]) {
+            return this.props.icons[this.state.iconIndex];
         }
-        return this.props.iconMd5;
+        return this.props.iconSource;
     }
     render () {
-        const iconMd5 = this.curIconMd5();
-        const iconURL = iconMd5 ?
-            `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
-            this.props.iconRawURL;
+        const iconSource = this.curIconSource();
         return (
             <LibraryItemComponent
                 bluetoothRequired={this.props.bluetoothRequired}
@@ -99,18 +111,21 @@ class LibraryItem extends React.PureComponent {
                 extensionId={this.props.extensionId}
                 featured={this.props.featured}
                 hidden={this.props.hidden}
-                iconURL={iconURL}
-                icons={this.props.icons}
+                iconSource={iconSource}
                 id={this.props.id}
                 insetIconURL={this.props.insetIconURL}
                 internetConnectionRequired={this.props.internetConnectionRequired}
+                isPlaying={this.props.isPlaying}
                 name={this.props.name}
+                showPlayButton={this.props.showPlayButton}
                 onBlur={this.handleBlur}
                 onClick={this.handleClick}
                 onFocus={this.handleFocus}
                 onKeyPress={this.handleKeyPress}
                 onMouseEnter={this.handleMouseEnter}
                 onMouseLeave={this.handleMouseLeave}
+                onPlay={this.handlePlay}
+                onStop={this.handleStop}
             />
         );
     }
@@ -127,23 +142,20 @@ LibraryItem.propTypes = {
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
-    iconMd5: PropTypes.string,
-    iconRawURL: PropTypes.string,
-    icons: PropTypes.arrayOf(
-        PropTypes.shape({
-            baseLayerMD5: PropTypes.string
-        })
-    ),
+    iconSource: LibraryItemComponent.propTypes.iconSource, // single icon
+    icons: PropTypes.arrayOf(LibraryItemComponent.propTypes.iconSource), // rotating icons
     id: PropTypes.number.isRequired,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
+    isPlaying: PropTypes.bool,
     name: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.node
     ]),
     onMouseEnter: PropTypes.func.isRequired,
     onMouseLeave: PropTypes.func.isRequired,
-    onSelect: PropTypes.func.isRequired
+    onSelect: PropTypes.func.isRequired,
+    showPlayButton: PropTypes.bool
 };
 
 export default injectIntl(LibraryItem);

src/containers/play-button.jsx

@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+
+import PlayButtonComponent from '../components/play-button/play-button.jsx';
+
+class PlayButton extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleClick',
+            'handleMouseDown',
+            'handleMouseEnter',
+            'handleMouseLeave',
+            'handleTouchStart',
+            'setButtonRef'
+        ]);
+        this.state = {
+            touchStarted: false
+        };
+    }
+    getDerivedStateFromProps (props, state) {
+        // if touchStarted is true and it's not playing, the sound must have ended.
+        // reset the touchStarted state to allow the sound to be replayed
+        if (state.touchStarted && !props.isPlaying) {
+            return {
+                touchStarted: false
+            };
+        }
+        return null; // nothing changed
+    }
+    componentDidMount () {
+        // Touch start
+        this.buttonRef.addEventListener('touchstart', this.handleTouchStart);
+    }
+    componentWillUnmount () {
+        this.buttonRef.removeEventListener('touchstart', this.handleTouchStart);
+    }
+    handleClick (e) {
+        //  stop the click from propagating out of the button
+        e.stopPropagation();
+    }
+    handleMouseDown (e) {
+        // prevent default (focus) on mouseDown
+        e.preventDefault();
+        if (this.props.isPlaying) {
+            // stop sound and reset touch state
+            this.props.onStop();
+            if (this.state.touchstarted) this.setState({touchStarted: false});
+        } else {
+            this.props.onPlay();
+            if (this.state.touchstarted) {
+                // started on touch, but now clicked mouse
+                this.setState({touchStarted: false});
+            }
+        }
+    }
+    handleTouchStart (e) {
+        if (this.props.isPlaying) {
+            // If playing, stop sound, and reset touch state
+            e.preventDefault();
+            this.setState({touchStarted: false});
+            this.props.onStop();
+        } else {
+            // otherwise start playing, and set touch state
+            e.preventDefault();
+            this.setState({touchStarted: true});
+            this.props.onPlay();
+        }
+    }
+    handleMouseEnter (e) {
+        // start the sound if it's not already playing
+        e.preventDefault();
+        if (!this.props.isPlaying) {
+            this.props.onPlay();
+        }
+    }
+    handleMouseLeave () {
+        // stop the sound unless it was started by touch
+        if (this.props.isPlaying && !this.state.touchstarted) {
+            this.props.onStop();
+        }
+    }
+    setButtonRef (ref) {
+        this.buttonRef = ref;
+    }
+    render () {
+        const {
+            className,
+            isPlaying,
+            onPlay, // eslint-disable-line no-unused-vars
+            onStop // eslint-disable-line no-unused-vars
+        } = this.props;
+        return (
+            <PlayButtonComponent
+                className={className}
+                isPlaying={isPlaying}
+                onClick={this.handleClick}
+                onMouseDown={this.handleMouseDown}
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
+                setButtonRef={this.setButtonRef}
+            />
+        );
+    }
+}
+
+PlayButton.propTypes = {
+    className: PropTypes.string,
+    isPlaying: PropTypes.bool.isRequired,
+    onPlay: PropTypes.func.isRequired,
+    onStop: PropTypes.func.isRequired
+};
+
+export default PlayButton;

src/containers/record-modal.jsx

@@ -2,8 +2,8 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import VM from 'scratch-vm';
-import WavEncoder from 'wav-encoder';
 import {connect} from 'react-redux';
+import {encodeAndAddSoundToVM} from '../lib/audio/audio-util.js';
 
 import RecordModalComponent from '../components/record-modal/record-modal.jsx';
 
@@ -71,39 +71,12 @@ class RecordModal extends React.Component {
             const startIndex = Math.floor(this.state.trimStart * sampleCount);
             const endIndex = Math.floor(this.state.trimEnd * sampleCount);
             const clippedSamples = this.state.samples.slice(startIndex, endIndex);
-            WavEncoder.encode({
-                sampleRate: this.state.sampleRate,
-                channelData: [clippedSamples]
-            }).then(wavBuffer => {
-                const vmSound = {
-                    format: '',
-                    dataFormat: 'wav',
-                    rate: this.state.sampleRate,
-                    sampleCount: clippedSamples.length
-                };
 
-                // Create an asset from the encoded .wav and get resulting md5
-                const storage = this.props.vm.runtime.storage;
-                vmSound.asset = storage.createAsset(
-                    storage.AssetType.Sound,
-                    storage.DataFormat.WAV,
-                    new Uint8Array(wavBuffer),
-                    null,
-                    true // generate md5
-                );
-                vmSound.assetId = vmSound.asset.assetId;
-
-                // update vmSound object with md5 property
-                vmSound.md5 = `${vmSound.assetId}.${vmSound.dataFormat}`;
-                // The VM will update the sound name to a fresh name
-                // if the following is already taken
-                vmSound.name = 'recording1';
-
-                this.props.vm.addSound(vmSound).then(() => {
+            encodeAndAddSoundToVM(this.props.vm, clippedSamples, this.state.sampleRate, 'recording1',
+                () => {
                     this.props.onClose();
                     this.props.onNewSound();
                 });
-            });
         });
     }
     handleCancel () {

src/containers/sb-file-uploader.jsx

@@ -26,13 +26,14 @@ import {
 /**
  * SBFileUploader component passes a file input, load handler and props to its child.
  * It expects this child to be a function with the signature
- *     function (renderFileInput, loadProject) {}
+ *     function (renderFileInput, handleLoadProject) {}
  * The component can then be used to attach project loading functionality
  * to any other component:
  *
- * <SBFileUploader>{(renderFileInput, loadProject) => (
+ * <SBFileUploader>{(className, renderFileInput, handleLoadProject) => (
  *     <MyCoolComponent
- *         onClick={loadProject}
+ *         className={className}
+ *         onClick={handleLoadProject}
  *     >
  *         {renderFileInput()}
  *     </MyCoolComponent>

src/containers/sound-editor.jsx

@@ -2,10 +2,11 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import WavEncoder from 'wav-encoder';
+import VM from 'scratch-vm';
 
 import {connect} from 'react-redux';
 
-import {computeChunkedRMS, SOUND_BYTE_LIMIT} from '../lib/audio/audio-util.js';
+import {computeChunkedRMS, encodeAndAddSoundToVM, SOUND_BYTE_LIMIT} from '../lib/audio/audio-util.js';
 import AudioEffects from '../lib/audio/audio-effects.js';
 import SoundEditorComponent from '../components/sound-editor/sound-editor.jsx';
 import AudioBufferPlayer from '../lib/audio/audio-buffer-player.js';
@@ -17,21 +18,29 @@ class SoundEditor extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
+            'copy',
             'copyCurrentBuffer',
+            'handleCopyToNew',
             'handleStoppedPlaying',
             'handleChangeName',
             'handlePlay',
             'handleStopPlaying',
             'handleUpdatePlayhead',
-            'handleActivateTrim',
-            'handleUpdateTrimEnd',
-            'handleUpdateTrimStart',
+            'handleDelete',
+            'handleUpdateTrim',
             'handleEffect',
             'handleUndo',
             'handleRedo',
-            'submitNewSamples'
+            'submitNewSamples',
+            'handleCopy',
+            'handlePaste',
+            'paste',
+            'handleKeyPress',
+            'handleContainerClick',
+            'setRef'
         ]);
         this.state = {
+            copyBuffer: null,
             chunkLevels: computeChunkedRMS(this.props.samples),
             playhead: null, // null is not playing, [0 -> 1] is playing percent
             trimStart: null,
@@ -40,28 +49,84 @@ class SoundEditor extends React.Component {
 
         this.redoStack = [];
         this.undoStack = [];
+
+        this.ref = null;
     }
     componentDidMount () {
         this.audioBufferPlayer = new AudioBufferPlayer(this.props.samples, this.props.sampleRate);
+
+        document.addEventListener('keydown', this.handleKeyPress);
     }
     componentWillReceiveProps (newProps) {
         if (newProps.soundId !== this.props.soundId) { // A different sound has been selected
             this.redoStack = [];
             this.undoStack = [];
             this.resetState(newProps.samples, newProps.sampleRate);
+            this.setState({
+                trimStart: null,
+                trimEnd: null
+            });
         }
     }
     componentWillUnmount () {
         this.audioBufferPlayer.stop();
+
+        document.removeEventListener('keydown', this.handleKeyPress);
+    }
+    handleKeyPress (event) {
+        if (event.target instanceof HTMLInputElement) {
+            // Ignore keyboard shortcuts if a text input field is focused
+            return;
+        }
+        if (event.key === ' ') {
+            event.preventDefault();
+            if (this.state.playhead) {
+                this.handleStopPlaying();
+            } else {
+                this.handlePlay();
+            }
+        }
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            event.preventDefault();
+            if (event.shiftKey) {
+                this.handleDeleteInverse();
+            } else {
+                this.handleDelete();
+            }
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.handleUpdateTrim(null, null);
+        }
+        if (event.metaKey || event.ctrlKey) {
+            if (event.shiftKey && event.key.toLowerCase() === 'z') {
+                event.preventDefault();
+                if (this.redoStack.length > 0) {
+                    this.handleRedo();
+                }
+            } else if (event.key === 'z') {
+                if (this.undoStack.length > 0) {
+                    event.preventDefault();
+                    this.handleUndo();
+                }
+            } else if (event.key === 'c') {
+                event.preventDefault();
+                this.handleCopy();
+            } else if (event.key === 'v') {
+                event.preventDefault();
+                this.handlePaste();
+            } else if (event.key === 'a') {
+                event.preventDefault();
+                this.handleUpdateTrim(0, 1);
+            }
+        }
     }
     resetState (samples, sampleRate) {
         this.audioBufferPlayer.stop();
         this.audioBufferPlayer = new AudioBufferPlayer(samples, sampleRate);
         this.setState({
             chunkLevels: computeChunkedRMS(samples),
-            playhead: null,
-            trimStart: null,
-            trimEnd: null
+            playhead: null
         });
     }
     submitNewSamples (samples, sampleRate, skipUndo) {
@@ -93,7 +158,7 @@ class SoundEditor extends React.Component {
                 if (this.undoStack.length >= UNDO_STACK_SIZE) {
                     this.undoStack.shift(); // Drop the first element off the array
                 }
-                this.undoStack.push(this.copyCurrentBuffer());
+                this.undoStack.push(this.getUndoItem());
             }
             this.resetState(samples, sampleRate);
             this.props.vm.updateSoundBuffer(
@@ -106,6 +171,7 @@ class SoundEditor extends React.Component {
         return false; // Update failed
     }
     handlePlay () {
+        this.audioBufferPlayer.stop();
         this.audioBufferPlayer.play(
             this.state.trimStart || 0,
             this.state.trimEnd || 1,
@@ -125,31 +191,46 @@ class SoundEditor extends React.Component {
     handleChangeName (name) {
         this.props.vm.renameSound(this.props.soundIndex, name);
     }
-    handleActivateTrim () {
-        if (this.state.trimStart === null && this.state.trimEnd === null) {
-            this.setState({trimEnd: 0.95, trimStart: 0.05});
+    handleDelete () {
+        const {samples, sampleRate} = this.copyCurrentBuffer();
+        const sampleCount = samples.length;
+        const startIndex = Math.floor(this.state.trimStart * sampleCount);
+        const endIndex = Math.floor(this.state.trimEnd * sampleCount);
+        const firstPart = samples.slice(0, startIndex);
+        const secondPart = samples.slice(endIndex, sampleCount);
+        const newLength = firstPart.length + secondPart.length;
+        let newSamples;
+        if (newLength === 0) {
+            newSamples = new Float32Array(1);
         } else {
-            const {samples, sampleRate} = this.copyCurrentBuffer();
-            const sampleCount = samples.length;
-            const startIndex = Math.floor(this.state.trimStart * sampleCount);
-            const endIndex = Math.floor(this.state.trimEnd * sampleCount);
-            if (endIndex > startIndex) { // Strictly greater to prevent 0 sample sounds
-                const clippedSamples = samples.slice(startIndex, endIndex);
-                this.submitNewSamples(clippedSamples, sampleRate);
-            } else {
-                // Just clear the trim state, it cannot be completed
-                this.setState({
-                    trimStart: null,
-                    trimEnd: null
-                });
-            }
+            newSamples = new Float32Array(newLength);
+            newSamples.set(firstPart, 0);
+            newSamples.set(secondPart, firstPart.length);
         }
+        this.submitNewSamples(newSamples, sampleRate);
+        this.setState({
+            trimStart: null,
+            trimEnd: null
+        });
     }
-    handleUpdateTrimEnd (trimEnd) {
-        this.setState({trimEnd});
+    handleDeleteInverse () {
+        const {samples, sampleRate} = this.copyCurrentBuffer();
+        const sampleCount = samples.length;
+        const startIndex = Math.floor(this.state.trimStart * sampleCount);
+        const endIndex = Math.floor(this.state.trimEnd * sampleCount);
+        let clippedSamples = samples.slice(startIndex, endIndex);
+        if (clippedSamples.length === 0) {
+            clippedSamples = new Float32Array(1);
+        }
+        this.submitNewSamples(clippedSamples, sampleRate);
+        this.setState({
+            trimStart: null,
+            trimEnd: null
+        });
     }
-    handleUpdateTrimStart (trimStart) {
-        this.setState({trimStart});
+    handleUpdateTrim (trimStart, trimEnd) {
+        this.setState({trimStart, trimEnd});
+        this.handleStopPlaying();
     }
     effectFactory (name) {
         return () => this.handleEffect(name);
@@ -162,52 +243,181 @@ class SoundEditor extends React.Component {
         };
     }
     handleEffect (name) {
-        const effects = new AudioEffects(this.audioBufferPlayer.buffer, name);
-        effects.process(({renderedBuffer}) => {
+        const trimStart = this.state.trimStart === null ? 0.0 : this.state.trimStart;
+        const trimEnd = this.state.trimEnd === null ? 1.0 : this.state.trimEnd;
+
+        // Offline audio context needs at least 2 samples
+        if (this.audioBufferPlayer.buffer.length < 2) {
+            return;
+        }
+
+        const effects = new AudioEffects(this.audioBufferPlayer.buffer, name, trimStart, trimEnd);
+        effects.process((renderedBuffer, adjustedTrimStart, adjustedTrimEnd) => {
             const samples = renderedBuffer.getChannelData(0);
             const sampleRate = renderedBuffer.sampleRate;
             const success = this.submitNewSamples(samples, sampleRate);
-            if (success) this.handlePlay();
+            if (success) {
+                if (this.state.trimStart === null) {
+                    this.handlePlay();
+                } else {
+                    this.setState({trimStart: adjustedTrimStart, trimEnd: adjustedTrimEnd}, this.handlePlay);
+                }
+            }
         });
     }
+    getUndoItem () {
+        return {
+            ...this.copyCurrentBuffer(),
+            trimStart: this.state.trimStart,
+            trimEnd: this.state.trimEnd
+        };
+    }
     handleUndo () {
-        this.redoStack.push(this.copyCurrentBuffer());
-        const {samples, sampleRate} = this.undoStack.pop();
+        this.redoStack.push(this.getUndoItem());
+        const {samples, sampleRate, trimStart, trimEnd} = this.undoStack.pop();
         if (samples) {
             this.submitNewSamples(samples, sampleRate, true);
-            this.handlePlay();
+            this.setState({trimStart: trimStart, trimEnd: trimEnd}, this.handlePlay);
         }
     }
     handleRedo () {
-        const {samples, sampleRate} = this.redoStack.pop();
+        const {samples, sampleRate, trimStart, trimEnd} = this.redoStack.pop();
         if (samples) {
-            this.undoStack.push(this.copyCurrentBuffer());
+            this.undoStack.push(this.getUndoItem());
             this.submitNewSamples(samples, sampleRate, true);
+            this.setState({trimStart: trimStart, trimEnd: trimEnd}, this.handlePlay);
+        }
+    }
+    handleCopy () {
+        this.copy();
+    }
+    copy (callback) {
+        const trimStart = this.state.trimStart === null ? 0.0 : this.state.trimStart;
+        const trimEnd = this.state.trimEnd === null ? 1.0 : this.state.trimEnd;
+
+        const newCopyBuffer = this.copyCurrentBuffer();
+        const trimStartSamples = trimStart * newCopyBuffer.samples.length;
+        const trimEndSamples = trimEnd * newCopyBuffer.samples.length;
+        newCopyBuffer.samples = newCopyBuffer.samples.slice(trimStartSamples, trimEndSamples);
+
+        this.setState({
+            copyBuffer: newCopyBuffer
+        }, callback);
+    }
+    handleCopyToNew () {
+        this.copy(() => {
+            encodeAndAddSoundToVM(this.props.vm, this.state.copyBuffer.samples,
+                this.state.copyBuffer.sampleRate, this.props.name);
+        });
+    }
+    resampleBufferToRate (buffer, newRate) {
+        return new Promise(resolve => {
+            if (window.OfflineAudioContext) {
+                const sampleRateRatio = newRate / buffer.sampleRate;
+                const newLength = sampleRateRatio * buffer.samples.length;
+                const offlineContext = new window.OfflineAudioContext(1, newLength, newRate);
+                const source = offlineContext.createBufferSource();
+                const audioBuffer = offlineContext.createBuffer(1, buffer.samples.length, buffer.sampleRate);
+                audioBuffer.getChannelData(0).set(buffer.samples);
+                source.buffer = audioBuffer;
+                source.connect(offlineContext.destination);
+                source.start();
+                offlineContext.startRendering();
+                offlineContext.oncomplete = ({renderedBuffer}) => {
+                    resolve({
+                        samples: renderedBuffer.getChannelData(0),
+                        sampleRate: newRate
+                    });
+                };
+            }
+        });
+    }
+    paste () {
+        // If there's no selection, paste at the end of the sound
+        const {samples} = this.copyCurrentBuffer();
+        if (this.state.trimStart === null) {
+            const newLength = samples.length + this.state.copyBuffer.samples.length;
+            const newSamples = new Float32Array(newLength);
+            newSamples.set(samples, 0);
+            newSamples.set(this.state.copyBuffer.samples, samples.length);
+            this.submitNewSamples(newSamples, this.props.sampleRate, false);
             this.handlePlay();
+        } else {
+            // else replace the selection with the pasted sound
+            const trimStartSamples = this.state.trimStart * samples.length;
+            const trimEndSamples = this.state.trimEnd * samples.length;
+            const firstPart = samples.slice(0, trimStartSamples);
+            const lastPart = samples.slice(trimEndSamples);
+            const newLength = firstPart.length + this.state.copyBuffer.samples.length + lastPart.length;
+            const newSamples = new Float32Array(newLength);
+            newSamples.set(firstPart, 0);
+            newSamples.set(this.state.copyBuffer.samples, firstPart.length);
+            newSamples.set(lastPart, firstPart.length + this.state.copyBuffer.samples.length);
+
+            const trimStartSeconds = trimStartSamples / this.props.sampleRate;
+            const trimEndSeconds = trimStartSeconds +
+                (this.state.copyBuffer.samples.length / this.state.copyBuffer.sampleRate);
+            const newDurationSeconds = newSamples.length / this.state.copyBuffer.sampleRate;
+            const adjustedTrimStart = trimStartSeconds / newDurationSeconds;
+            const adjustedTrimEnd = trimEndSeconds / newDurationSeconds;
+            this.submitNewSamples(newSamples, this.props.sampleRate, false);
+            this.setState({
+                trimStart: adjustedTrimStart,
+                trimEnd: adjustedTrimEnd
+            }, this.handlePlay);
+        }
+    }
+    handlePaste () {
+        if (!this.state.copyBuffer) return;
+        if (this.state.copyBuffer.sampleRate === this.props.sampleRate) {
+            this.paste();
+        } else {
+            this.resampleBufferToRate(this.state.copyBuffer, this.props.sampleRate).then(buffer => {
+                this.setState({
+                    copyBuffer: buffer
+                }, this.paste);
+            });
+        }
+    }
+    setRef (element) {
+        this.ref = element;
+    }
+    handleContainerClick (e) {
+        // If the click is on the sound editor's div (and not any other element), delesect
+        if (e.target === this.ref && this.state.trimStart !== null) {
+            this.handleUpdateTrim(null, null);
         }
     }
     render () {
         const {effectTypes} = AudioEffects;
         return (
             <SoundEditorComponent
+                canPaste={this.state.copyBuffer !== null}
                 canRedo={this.redoStack.length > 0}
                 canUndo={this.undoStack.length > 0}
                 chunkLevels={this.state.chunkLevels}
                 name={this.props.name}
                 playhead={this.state.playhead}
+                setRef={this.setRef}
                 trimEnd={this.state.trimEnd}
                 trimStart={this.state.trimStart}
-                onActivateTrim={this.handleActivateTrim}
                 onChangeName={this.handleChangeName}
+                onContainerClick={this.handleContainerClick}
+                onCopy={this.handleCopy}
+                onCopyToNew={this.handleCopyToNew}
+                onDelete={this.handleDelete}
                 onEcho={this.effectFactory(effectTypes.ECHO)}
+                onFadeIn={this.effectFactory(effectTypes.FADEIN)}
+                onFadeOut={this.effectFactory(effectTypes.FADEOUT)}
                 onFaster={this.effectFactory(effectTypes.FASTER)}
                 onLouder={this.effectFactory(effectTypes.LOUDER)}
+                onMute={this.effectFactory(effectTypes.MUTE)}
+                onPaste={this.handlePaste}
                 onPlay={this.handlePlay}
                 onRedo={this.handleRedo}
                 onReverse={this.effectFactory(effectTypes.REVERSE)}
                 onRobot={this.effectFactory(effectTypes.ROBOT)}
-                onSetTrimEnd={this.handleUpdateTrimEnd}
-                onSetTrimStart={this.handleUpdateTrimStart}
+                onSetTrim={this.handleUpdateTrim}
                 onSlower={this.effectFactory(effectTypes.SLOWER)}
                 onSofter={this.effectFactory(effectTypes.SOFTER)}
                 onStop={this.handleStopPlaying}
@@ -223,10 +433,7 @@ SoundEditor.propTypes = {
     samples: PropTypes.instanceOf(Float32Array),
     soundId: PropTypes.string,
     soundIndex: PropTypes.number,
-    vm: PropTypes.shape({
-        updateSoundBuffer: PropTypes.func,
-        renameSound: PropTypes.func
-    })
+    vm: PropTypes.instanceOf(VM).isRequired
 };
 
 const mapStateToProps = (state, {soundIndex}) => {

src/containers/sound-library.jsx

@@ -7,8 +7,8 @@ import AudioEngine from 'scratch-audio';
 
 import LibraryComponent from '../components/library/library.jsx';
 
-import soundIcon from '../components/asset-panel/icon--sound.svg';
-import soundIconRtl from '../components/asset-panel/icon--sound-rtl.svg';
+import soundIcon from '../components/library-item/lib-icon--sound.svg';
+import soundIconRtl from '../components/library-item/lib-icon--sound-rtl.svg';
 
 import soundLibraryContent from '../lib/libraries/sounds.json';
 import soundTags from '../lib/libraries/sound-tags';
@@ -29,7 +29,9 @@ class SoundLibrary extends React.PureComponent {
         bindAll(this, [
             'handleItemSelected',
             'handleItemMouseEnter',
-            'handleItemMouseLeave'
+            'handleItemMouseLeave',
+            'onStop',
+            'setStopHandler'
         ]);
 
         /**
@@ -43,6 +45,11 @@ class SoundLibrary extends React.PureComponent {
          * @type {Promise<SoundPlayer>}
          */
         this.playingSoundPromise = null;
+
+        /**
+         * function to call when the sound ends
+         */
+        this.handleStop = null;
     }
     componentDidMount () {
         this.audioEngine = new AudioEngine();
@@ -51,10 +58,22 @@ class SoundLibrary extends React.PureComponent {
     componentWillUnmount () {
         this.stopPlayingSound();
     }
+    onStop () {
+        if (this.playingSoundPromise !== null) {
+            this.playingSoundPromise.then(soundPlayer => soundPlayer.removeListener('stop', this.onStop));
+            if (this.handleStop) this.handleStop();
+        }
+
+    }
+    setStopHandler (func) {
+        this.handleStop = func;
+    }
     stopPlayingSound () {
         // Playback is queued, playing, or has played recently and finished
         // normally.
         if (this.playingSoundPromise !== null) {
+            // Forcing sound to stop, so stop listening for sound ending:
+            this.playingSoundPromise.then(soundPlayer => soundPlayer.removeListener('stop', this.onStop));
             // Queued playback began playing before this method.
             if (this.playingSoundPromise.isPlaying) {
                 // Fetch the player from the promise and stop playback soon.
@@ -102,6 +121,7 @@ class SoundLibrary extends React.PureComponent {
                 // Play the sound. Playing the sound will always come before a
                 // paired stop if the sound must stop early.
                 soundPlayer.play();
+                soundPlayer.addListener('stop', this.onStop);
                 // Set that the sound is playing. This affects the type of stop
                 // instruction given if the sound must stop early.
                 if (this.playingSoundPromise !== null) {
@@ -141,8 +161,10 @@ class SoundLibrary extends React.PureComponent {
 
         return (
             <LibraryComponent
+                showPlayButton
                 data={soundLibraryThumbnailData}
                 id="soundLibrary"
+                setStopHandler={this.setStopHandler}
                 tags={soundTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemMouseEnter={this.handleItemMouseEnter}

src/containers/target-pane.jsx

@@ -141,11 +141,13 @@ class TargetPane extends React.Component {
         this.props.onShowImporting();
         handleFileUpload(e.target, (buffer, fileType, fileName, fileIndex, fileCount) => {
             spriteUpload(buffer, fileType, fileName, storage, newSprite => {
-                this.handleNewSprite(newSprite).then(() => {
-                    if (fileIndex === fileCount - 1) {
-                        this.props.onCloseImporting();
-                    }
-                });
+                this.handleNewSprite(newSprite)
+                    .then(() => {
+                        if (fileIndex === fileCount - 1) {
+                            this.props.onCloseImporting();
+                        }
+                    })
+                    .catch(this.props.onCloseImporting);
             }, this.props.onCloseImporting);
         }, this.props.onCloseImporting);
     }

src/index.js

@@ -1,5 +1,6 @@
 import GUI from './containers/gui.jsx';
 import AppStateHOC from './lib/app-state-hoc.jsx';
+import TitledHOC from './lib/titled-hoc.jsx';
 import GuiReducer, {guiInitialState, guiMiddleware, initEmbedded, initFullScreen, initPlayer} from './reducers/gui';
 import LocalesReducer, {localesInitialState, initLocale} from './reducers/locales';
 import {ScratchPaintReducer} from 'scratch-paint';
@@ -16,6 +17,7 @@ const guiReducers = {
 export {
     GUI as default,
     AppStateHOC,
+    TitledHOC,
     setAppElement,
     guiReducers,
     guiInitialState,

src/lib/audio/audio-effects.js

@@ -1,6 +1,8 @@
 import EchoEffect from './effects/echo-effect.js';
 import RobotEffect from './effects/robot-effect.js';
 import VolumeEffect from './effects/volume-effect.js';
+import FadeEffect from './effects/fade-effect.js';
+import MuteEffect from './effects/mute-effect.js';
 
 const effectTypes = {
     ROBOT: 'robot',
@@ -9,32 +11,56 @@ const effectTypes = {
     SOFTER: 'lower',
     FASTER: 'faster',
     SLOWER: 'slower',
-    ECHO: 'echo'
+    ECHO: 'echo',
+    FADEIN: 'fade in',
+    FADEOUT: 'fade out',
+    MUTE: 'mute'
 };
 
 class AudioEffects {
     static get effectTypes () {
         return effectTypes;
     }
-    constructor (buffer, name) {
+    constructor (buffer, name, trimStart, trimEnd) {
+        this.trimStartSeconds = (trimStart * buffer.length) / buffer.sampleRate;
+        this.trimEndSeconds = (trimEnd * buffer.length) / buffer.sampleRate;
+        this.adjustedTrimStartSeconds = this.trimStartSeconds;
+        this.adjustedTrimEndSeconds = this.trimEndSeconds;
+
         // Some effects will modify the playback rate and/or number of samples.
         // Need to precompute those values to create the offline audio context.
         const pitchRatio = Math.pow(2, 4 / 12); // A major third
         let sampleCount = buffer.length;
-        let playbackRate = 1;
+        const affectedSampleCount = Math.floor((this.trimEndSeconds - this.trimStartSeconds) *
+            buffer.sampleRate);
+        let adjustedAffectedSampleCount = affectedSampleCount;
+        const unaffectedSampleCount = sampleCount - affectedSampleCount;
+
+        this.playbackRate = 1;
         switch (name) {
         case effectTypes.ECHO:
-            sampleCount = buffer.length + (0.25 * 3 * buffer.sampleRate);
+            sampleCount = Math.max(sampleCount,
+                Math.floor((this.trimEndSeconds + EchoEffect.TAIL_SECONDS) * buffer.sampleRate));
             break;
         case effectTypes.FASTER:
-            playbackRate = pitchRatio;
-            sampleCount = Math.floor(buffer.length / playbackRate);
+            this.playbackRate = pitchRatio;
+            adjustedAffectedSampleCount = Math.floor(affectedSampleCount / this.playbackRate);
+            sampleCount = unaffectedSampleCount + adjustedAffectedSampleCount;
+
             break;
         case effectTypes.SLOWER:
-            playbackRate = 1 / pitchRatio;
-            sampleCount = Math.floor(buffer.length / playbackRate);
+            this.playbackRate = 1 / pitchRatio;
+            adjustedAffectedSampleCount = Math.floor(affectedSampleCount / this.playbackRate);
+            sampleCount = unaffectedSampleCount + adjustedAffectedSampleCount;
             break;
         }
+
+        const durationSeconds = sampleCount / buffer.sampleRate;
+        this.adjustedTrimEndSeconds = this.trimStartSeconds +
+            (adjustedAffectedSampleCount / buffer.sampleRate);
+        this.adjustedTrimStart = this.adjustedTrimStartSeconds / durationSeconds;
+        this.adjustedTrimEnd = this.adjustedTrimEndSeconds / durationSeconds;
+
         if (window.OfflineAudioContext) {
             this.audioContext = new window.OfflineAudioContext(1, sampleCount, buffer.sampleRate);
         } else {
@@ -52,8 +78,17 @@ class AudioEffects {
             const newBuffer = this.audioContext.createBuffer(1, buffer.length, buffer.sampleRate);
             const newBufferData = newBuffer.getChannelData(0);
             const bufferLength = buffer.length;
+
+            const startSamples = Math.floor(this.trimStartSeconds * buffer.sampleRate);
+            const endSamples = Math.floor(this.trimEndSeconds * buffer.sampleRate);
+            let counter = 0;
             for (let i = 0; i < bufferLength; i++) {
-                newBufferData[i] = originalBufferData[bufferLength - i - 1];
+                if (i >= startSamples && i < endSamples) {
+                    newBufferData[i] = originalBufferData[endSamples - counter - 1];
+                    counter++;
+                } else {
+                    newBufferData[i] = originalBufferData[i];
+                }
             }
             this.buffer = newBuffer;
         } else {
@@ -63,7 +98,6 @@ class AudioEffects {
 
         this.source = this.audioContext.createBufferSource();
         this.source.buffer = this.buffer;
-        this.source.playbackRate.value = playbackRate;
         this.name = name;
     }
     process (done) {
@@ -71,17 +105,38 @@ class AudioEffects {
         let input;
         let output;
         switch (this.name) {
+        case effectTypes.FASTER:
+        case effectTypes.SLOWER:
+            this.source.playbackRate.setValueAtTime(this.playbackRate, this.adjustedTrimStartSeconds);
+            this.source.playbackRate.setValueAtTime(1.0, this.adjustedTrimEndSeconds);
+            break;
         case effectTypes.LOUDER:
-            ({input, output} = new VolumeEffect(this.audioContext, 1.25));
+            ({input, output} = new VolumeEffect(this.audioContext, 1.25,
+                this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
             break;
         case effectTypes.SOFTER:
-            ({input, output} = new VolumeEffect(this.audioContext, 0.75));
+            ({input, output} = new VolumeEffect(this.audioContext, 0.75,
+                this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
             break;
         case effectTypes.ECHO:
-            ({input, output} = new EchoEffect(this.audioContext, 0.25));
+            ({input, output} = new EchoEffect(this.audioContext,
+                this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
             break;
         case effectTypes.ROBOT:
-            ({input, output} = new RobotEffect(this.audioContext, 0.25));
+            ({input, output} = new RobotEffect(this.audioContext,
+                this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
+            break;
+        case effectTypes.FADEIN:
+            ({input, output} = new FadeEffect(this.audioContext, true,
+                this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
+            break;
+        case effectTypes.FADEOUT:
+            ({input, output} = new FadeEffect(this.audioContext, false,
+                this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
+            break;
+        case effectTypes.MUTE:
+            ({input, output} = new MuteEffect(this.audioContext,
+                this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
             break;
         }
 
@@ -96,7 +151,10 @@ class AudioEffects {
         this.source.start();
 
         this.audioContext.startRendering();
-        this.audioContext.oncomplete = done;
+        this.audioContext.oncomplete = ({renderedBuffer}) => {
+            done(renderedBuffer, this.adjustedTrimStart, this.adjustedTrimEnd);
+        };
+
     }
 }
 

src/lib/audio/audio-util.js

@@ -1,3 +1,5 @@
+import WavEncoder from 'wav-encoder';
+
 const SOUND_BYTE_LIMIT = 10 * 1000 * 1000; // 10mb
 
 const computeRMS = function (samples, scaling = 0.55) {
@@ -23,8 +25,43 @@ const computeChunkedRMS = function (samples, chunkSize = 1024) {
     return chunkLevels;
 };
 
+const encodeAndAddSoundToVM = function (vm, samples, sampleRate, name, callback) {
+    WavEncoder.encode({
+        sampleRate: sampleRate,
+        channelData: [samples]
+    }).then(wavBuffer => {
+        const vmSound = {
+            format: '',
+            dataFormat: 'wav',
+            rate: sampleRate,
+            sampleCount: samples.length
+        };
+
+        // Create an asset from the encoded .wav and get resulting md5
+        const storage = vm.runtime.storage;
+        vmSound.asset = storage.createAsset(
+            storage.AssetType.Sound,
+            storage.DataFormat.WAV,
+            new Uint8Array(wavBuffer),
+            null,
+            true // generate md5
+        );
+        vmSound.assetId = vmSound.asset.assetId;
+
+        // update vmSound object with md5 property
+        vmSound.md5 = `${vmSound.assetId}.${vmSound.dataFormat}`;
+        // The VM will update the sound name to a fresh name
+        vmSound.name = name;
+
+        vm.addSound(vmSound).then(() => {
+            if (callback) callback();
+        });
+    });
+};
+
 export {
     computeRMS,
     computeChunkedRMS,
+    encodeAndAddSoundToVM,
     SOUND_BYTE_LIMIT
 };

src/lib/audio/effects/echo-effect.js

@@ -1,15 +1,23 @@
 class EchoEffect {
-    constructor (audioContext, delayTime) {
+    static get DELAY_TIME () {
+        return 0.25;
+    }
+    static get TAIL_SECONDS () {
+        return 0.75;
+    }
+    constructor (audioContext, startTime, endTime) {
         this.audioContext = audioContext;
-        this.delayTime = delayTime;
         this.input = this.audioContext.createGain();
         this.output = this.audioContext.createGain();
 
         this.effectInput = this.audioContext.createGain();
-        this.effectInput.gain.value = 0.75;
+        this.effectInput.gain.value = 0;
+
+        this.effectInput.gain.setValueAtTime(0.75, startTime);
+        this.effectInput.gain.setValueAtTime(0, endTime);
 
         this.delay = this.audioContext.createDelay(1);
-        this.delay.delayTime.value = delayTime;
+        this.delay.delayTime.value = EchoEffect.DELAY_TIME;
         this.decay = this.audioContext.createGain();
         this.decay.gain.value = 0.3;
 

src/lib/audio/effects/fade-effect.js

@@ -0,0 +1,27 @@
+class FadeEffect {
+    constructor (audioContext, fadeIn, startSeconds, endSeconds) {
+        this.audioContext = audioContext;
+
+        this.input = this.audioContext.createGain();
+        this.output = this.audioContext.createGain();
+
+        this.gain = this.audioContext.createGain();
+
+        this.gain.gain.setValueAtTime(1, 0);
+
+        if (fadeIn) {
+            this.gain.gain.setValueAtTime(0, startSeconds);
+            this.gain.gain.linearRampToValueAtTime(1, endSeconds);
+        } else {
+            this.gain.gain.setValueAtTime(1, startSeconds);
+            this.gain.gain.linearRampToValueAtTime(0, endSeconds);
+        }
+
+        this.gain.gain.setValueAtTime(1, endSeconds);
+
+        this.input.connect(this.gain);
+        this.gain.connect(this.output);
+    }
+}
+
+export default FadeEffect;

src/lib/audio/effects/mute-effect.js

@@ -0,0 +1,22 @@
+class MuteEffect {
+    constructor (audioContext, startSeconds, endSeconds) {
+        this.audioContext = audioContext;
+
+        this.input = this.audioContext.createGain();
+        this.output = this.audioContext.createGain();
+
+        this.gain = this.audioContext.createGain();
+
+        // Smoothly ramp the gain down before the start time, and up after the end time.
+        this.rampLength = 0.001;
+        this.gain.gain.setValueAtTime(1.0, Math.max(0, startSeconds - this.rampLength));
+        this.gain.gain.linearRampToValueAtTime(0, startSeconds);
+        this.gain.gain.setValueAtTime(0, endSeconds);
+        this.gain.gain.linearRampToValueAtTime(1.0, endSeconds + this.rampLength);
+
+        this.input.connect(this.gain);
+        this.gain.connect(this.output);
+    }
+}
+
+export default MuteEffect;

src/lib/audio/effects/robot-effect.js

@@ -1,9 +1,20 @@
 class RobotEffect {
-    constructor (audioContext) {
+    constructor (audioContext, startTime, endTime) {
         this.audioContext = audioContext;
 
         this.input = this.audioContext.createGain();
         this.output = this.audioContext.createGain();
+        this.passthrough = this.audioContext.createGain();
+        this.effectInput = this.audioContext.createGain();
+
+        this.passthrough.gain.value = 1;
+        this.effectInput.gain.value = 0;
+
+        this.passthrough.gain.setValueAtTime(0, startTime);
+        this.passthrough.gain.setValueAtTime(1, endTime);
+
+        this.effectInput.gain.setValueAtTime(1, startTime);
+        this.effectInput.gain.setValueAtTime(0, endTime);
 
         // Ring modulator inspired by BBC Dalek voice
         // http://recherche.ircam.fr/pub/dafx11/Papers/66_e.pdf
@@ -70,8 +81,13 @@ class RobotEffect {
         biquadFilter.frequency.value = 1000;
         biquadFilter.gain.value = 1.25;
 
-        this.input.connect(vcInverter1);
-        this.input.connect(vcDiode4);
+        this.input.connect(this.effectInput);
+        this.input.connect(this.passthrough);
+
+        this.passthrough.connect(this.output);
+
+        this.effectInput.connect(vcInverter1);
+        this.effectInput.connect(vcDiode4);
 
         vcInverter1.connect(vcDiode3);
 
@@ -91,7 +107,7 @@ class RobotEffect {
         vcDiode3.connect(compressor);
         vcDiode4.connect(compressor);
 
-        this.input.connect(biquadFilter);
+        this.effectInput.connect(biquadFilter);
         biquadFilter.connect(compressor);
 
         compressor.connect(this.output);

src/lib/audio/effects/volume-effect.js

@@ -1,12 +1,18 @@
 class VolumeEffect {
-    constructor (audioContext, volume) {
+    constructor (audioContext, volume, startSeconds, endSeconds) {
         this.audioContext = audioContext;
 
         this.input = this.audioContext.createGain();
         this.output = this.audioContext.createGain();
 
         this.gain = this.audioContext.createGain();
-        this.gain.gain.value = volume;
+
+        // Smoothly ramp the gain up before the start time, and down after the end time.
+        this.rampLength = 0.01;
+        this.gain.gain.setValueAtTime(1.0, Math.max(0, startSeconds - this.rampLength));
+        this.gain.gain.exponentialRampToValueAtTime(volume, startSeconds);
+        this.gain.gain.setValueAtTime(volume, endSeconds);
+        this.gain.gain.exponentialRampToValueAtTime(1.0, endSeconds + this.rampLength);
 
         this.input.connect(this.gain);
         this.gain.connect(this.output);

src/lib/download-blob.js

@@ -11,6 +11,7 @@ export default (filename, blob) => {
     const url = window.URL.createObjectURL(blob);
     downloadLink.href = url;
     downloadLink.download = filename;
+    downloadLink.type = blob.type;
     downloadLink.click();
     window.URL.revokeObjectURL(url);
     document.body.removeChild(downloadLink);

src/lib/drag-recognizer.js

@@ -109,8 +109,10 @@ class DragRecognizer {
     }
 
     _handleEnd () {
-        this._onDragEnd();
         this.reset();
+        // Call the callback after reset to make sure if gestureInProgress()
+        // is used in response, it get the correct value (i.e. no gesture in progress)
+        this._onDragEnd();
     }
 
     _isDrag () {

src/lib/libraries/costumes.json

@@ -6807,6 +6807,71 @@
             1
         ]
     },
+    {
+        "name": "Marian-a",
+        "md5": "e9577a1eb098905dd386135bb38c0398.png",
+        "type": "costume",
+        "tags": [
+            "people"
+        ],
+        "info": [
+            217,
+            452,
+            2
+        ]
+    },
+    {
+        "name": "Marian-b",
+        "md5": "3d2ecee35eab8c37d1c3eadfe50ce447.png",
+        "type": "costume",
+        "tags": [
+            "people"
+        ],
+        "info": [
+            217,
+            452,
+            2
+        ]
+    },
+    {
+        "name": "Marian-c",
+        "md5": "221e9999b20ecc21b37c68fcdf09ab02.png",
+        "type": "costume",
+        "tags": [
+            "people"
+        ],
+        "info": [
+            141,
+            452,
+            2
+        ]
+    },
+    {
+        "name": "Marian-d",
+        "md5": "64206b46c411e40926569cf3f5e587be.png",
+        "type": "costume",
+        "tags": [
+            "people"
+        ],
+        "info": [
+            278,
+            438,
+            2
+        ]
+    },
+    {
+        "name": "Marian-e",
+        "md5": "16893c6136292ae36e13dc72cc55719b.png",
+        "type": "costume",
+        "tags": [
+            "people"
+        ],
+        "info": [
+            139,
+            423,
+            2
+        ]
+    },
     {
         "name": "Max-a",
         "md5": "5cc168bddf4561e6e7f1d30845d6efbf.svg",

src/lib/libraries/decks/index.jsx

@@ -184,148 +184,149 @@ export default {
         ),
         tags: ['imagine-if'],
         img: libraryImagineIf,
-        steps: [
-            {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Type What You Want to Say"
-                        description="Step name for 'Type What You Want to Say' step"
-                        id="gui.howtos.imagine-if.step_imagineTypeWhatYouWant"
-                    />
-                ),
-                image: 'imagineTypeWhatYouWant'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Click the Green Flag to Start"
-                        description="Step name for 'Click the Green Flag to Start' step"
-                        id="gui.howtos.imagine-if.step_imagineClickGreenFlag"
-                    />
-                ),
-                image: 'imagineClickGreenFlag'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Choose Any Backdrop"
-                        description="Step name for 'Choose Any Backdrop' step"
-                        id="gui.howtos.imagine-if.step_imagineChooseBackdrop"
-                    />
-                ),
-                image: 'imagineChooseBackdrop'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Choose Any Sprite"
-                        description="Step name for 'Choose Any Sprite' step"
-                        id="gui.howtos.imagine-if.step_imagineChooseSprite"
-                    />
-                ),
-                image: 'imagineChooseSprite'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Press the Space Key to Glide"
-                        description="Step name for 'Press the Space Key to Glide' step"
-                        id="gui.howtos.imagine-if.step_imagineFlyAround"
-                    />
-                ),
-                image: 'imagineFlyAround'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Choose Another Sprite"
-                        description="Step name for 'Choose Another Sprite' step"
-                        id="gui.howtos.imagine-if.step_imagineChooseAnotherSprite"
-                    />
-                ),
-                image: 'imagineChooseAnotherSprite'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Move Left-Right"
-                        description="Step name for 'Move Left-Right' step"
-                        id="gui.howtos.imagine-if.step_imagineLeftRight"
-                    />
-                ),
-                image: 'imagineLeftRight'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Move Up-Down"
-                        description="Step name for 'Move Up-Down' step"
-                        id="gui.howtos.imagine-if.step_imagineUpDown"
-                    />
-                ),
-                image: 'imagineUpDown'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Change Costumes"
-                        description="Step name for 'Change Costumes' step"
-                        id="gui.howtos.imagine-if.step_imagineChangeCostumes"
-                    />
-                ),
-                image: 'imagineChangeCostumes'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Glide to a Point"
-                        description="Step name for 'Glide to a Point' step"
-                        id="gui.howtos.imagine-if.step_imagineGlideToPoint"
-                    />
-                ),
-                image: 'imagineGlideToPoint'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Grow and Shrink"
-                        description="Step name for 'Grow and Shrink' step"
-                        id="gui.howtos.imagine-if.step_imagineGrowShrink"
-                    />
-                ),
-                image: 'imagineGrowShrink'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Choose Another Backdrop"
-                        description="Step name for 'Choose Another Backdrop' step"
-                        id="gui.howtos.imagine-if.step_imagineChooseAnotherBackdrop"
-                    />
-                ),
-                image: 'imagineChooseAnotherBackdrop'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Switch Backdrops"
-                        description="Step name for 'Switch Backdrops' step"
-                        id="gui.howtos.imagine-if.step_imagineSwitchBackdrops"
-                    />
-                ),
-                image: 'imagineSwitchBackdrops'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Add a Sound"
-                        description="Step name for 'Add a Sound' step"
-                        id="gui.howtos.imagine-if.step_imagineRecordASound"
-                    />
-                ),
-                image: 'imagineRecordASound'
-            }, {
-                title: (
-                    <FormattedMessage
-                        defaultMessage="Choose Your Sound"
-                        description="Step name for 'Choose Your Sound' step"
-                        id="gui.howtos.imagine-if.step_imagineChooseSound"
-                    />
-                ),
-                image: 'imagineChooseSound'
-            }, {
-                deckIds: [
-                    'hide-and-show',
-                    'Chase-Game'
-                ]
-            }
+        steps: [{
+            video: 'imagine-if'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Type What You Want to Say"
+                    description="Step name for 'Type What You Want to Say' step"
+                    id="gui.howtos.imagine-if.step_imagineTypeWhatYouWant"
+                />
+            ),
+            image: 'imagineTypeWhatYouWant'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Click the Green Flag to Start"
+                    description="Step name for 'Click the Green Flag to Start' step"
+                    id="gui.howtos.imagine-if.step_imagineClickGreenFlag"
+                />
+            ),
+            image: 'imagineClickGreenFlag'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose Any Backdrop"
+                    description="Step name for 'Choose Any Backdrop' step"
+                    id="gui.howtos.imagine-if.step_imagineChooseBackdrop"
+                />
+            ),
+            image: 'imagineChooseBackdrop'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose Any Sprite"
+                    description="Step name for 'Choose Any Sprite' step"
+                    id="gui.howtos.imagine-if.step_imagineChooseSprite"
+                />
+            ),
+            image: 'imagineChooseSprite'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Press the Space Key to Glide"
+                    description="Step name for 'Press the Space Key to Glide' step"
+                    id="gui.howtos.imagine-if.step_imagineFlyAround"
+                />
+            ),
+            image: 'imagineFlyAround'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose Another Sprite"
+                    description="Step name for 'Choose Another Sprite' step"
+                    id="gui.howtos.imagine-if.step_imagineChooseAnotherSprite"
+                />
+            ),
+            image: 'imagineChooseAnotherSprite'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Move Left-Right"
+                    description="Step name for 'Move Left-Right' step"
+                    id="gui.howtos.imagine-if.step_imagineLeftRight"
+                />
+            ),
+            image: 'imagineLeftRight'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Move Up-Down"
+                    description="Step name for 'Move Up-Down' step"
+                    id="gui.howtos.imagine-if.step_imagineUpDown"
+                />
+            ),
+            image: 'imagineUpDown'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Change Costumes"
+                    description="Step name for 'Change Costumes' step"
+                    id="gui.howtos.imagine-if.step_imagineChangeCostumes"
+                />
+            ),
+            image: 'imagineChangeCostumes'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Glide to a Point"
+                    description="Step name for 'Glide to a Point' step"
+                    id="gui.howtos.imagine-if.step_imagineGlideToPoint"
+                />
+            ),
+            image: 'imagineGlideToPoint'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Grow and Shrink"
+                    description="Step name for 'Grow and Shrink' step"
+                    id="gui.howtos.imagine-if.step_imagineGrowShrink"
+                />
+            ),
+            image: 'imagineGrowShrink'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose Another Backdrop"
+                    description="Step name for 'Choose Another Backdrop' step"
+                    id="gui.howtos.imagine-if.step_imagineChooseAnotherBackdrop"
+                />
+            ),
+            image: 'imagineChooseAnotherBackdrop'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Switch Backdrops"
+                    description="Step name for 'Switch Backdrops' step"
+                    id="gui.howtos.imagine-if.step_imagineSwitchBackdrops"
+                />
+            ),
+            image: 'imagineSwitchBackdrops'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add a Sound"
+                    description="Step name for 'Add a Sound' step"
+                    id="gui.howtos.imagine-if.step_imagineRecordASound"
+                />
+            ),
+            image: 'imagineRecordASound'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose Your Sound"
+                    description="Step name for 'Choose Your Sound' step"
+                    id="gui.howtos.imagine-if.step_imagineChooseSound"
+                />
+            ),
+            image: 'imagineChooseSound'
+        }, {
+            deckIds: [
+                'hide-and-show',
+                'Chase-Game'
+            ]
+        }
         ],
         urlId: 'imagine-if'
     },

src/lib/libraries/decks/translate-video.js

@@ -7,71 +7,111 @@
 const videos = {
     'intro-move-sayhello': {
         'en': 'rpjvs3v9gj',
+        'it': '2im6c1f9kn',
+        'pt': 'ngdfp8xg4x',
+        'pt-BR': 'ngdfp8xg4x',
         'ja': 'v2c2f3y2sc',
         'ja-Hira': 'v2c2f3y2sc'
     },
     'animate-a-name': {
         'en': 'pyur30ho05',
+        'it': 'c8zcrk6w09',
+        'pt': 't49tfrukyf',
+        'pt-BR': 't49tfrukyf',
         'ja': 'xrmgno02th',
         'ja-Hira': 'xrmgno02th'
     },
     'Make-Music': {
         'en': 'ir0j8ljsgm',
+        'it': '8nm1v1m9zx',
+        'pt': '9v4zl8504z',
+        'pt-BR': '9v4zl8504z',
         'ja': 'iybhyobckr',
         'ja-Hira': 'iybhyobckr'
     },
     'Make-A-Game': {
         'en': '5rp47ys13g',
+        'it': 'vrs1e38944',
+        'pt': 'rjst5ng61s',
+        'pt-BR': 'rjst5ng61s',
         'ja': 'h4q2ea3ojw',
         'ja-Hira': 'h4q2ea3ojw'
     },
     'Chase-Game': {
         'en': 'kusyx9thl5',
+        'it': '899b2jmjlu',
+        'pt': 'rw6kr9e37n',
+        'pt-BR': 'rw6kr9e37n',
         'ja': 'wr6ysk8s6d',
         'ja-Hira': 'wr6ysk8s6d'
     },
     'add-a-backdrop': {
         'en': 'nict6zdzlx',
+        'it': 'vrrfpm5grh',
+        'pt': 'wq7sm038pq',
+        'pt-BR': 'wq7sm038pq',
         'ja': 'j382ohngg7',
         'ja-Hira': 'j382ohngg7'
     },
     'change-size': {
         'en': 'p8va85hh61',
+        'it': '1xb1jztsvr',
+        'pt': '1ad1ip3ly7',
+        'pt-BR': '1ad1ip3ly7',
         'ja': 'uzkfi9uai0',
         'ja-Hira': 'uzkfi9uai0'
     },
     'glide-around': {
         'en': 'sh9j978rg8',
+        'it': 'nvdhpgiebe',
         'ja': 'jsat4vhu48',
         'ja-Hira': 'jsat4vhu48'
     },
     'record-a-sound': {
         'en': 'ulzl1fbzny',
+        'it': 'ncr9lqk7bt',
+        'pt': 'aavagpvh5w',
+        'pt-BR': 'aavagpvh5w',
         'ja': '5zmy6u614k',
         'ja-Hira': '5zmy6u614k'
     },
     'spin-video': {
         'en': '07fed5hhpv',
+        'it': 'obmrphhobt',
+        'pt': 'jxqksu6zcw',
+        'pt-BR': 'jxqksu6zcw',
         'ja': 'hjhc0a8r7j',
         'ja-Hira': 'hjhc0a8r7j'
     },
     'hide-and-show': {
         'en': 'g479ahobo9',
+        'it': 'v0vbx3l5uk',
+        'pt': 'ibtmwb58y8',
+        'pt-BR': 'ibtmwb58y8',
         'ja': 'ruynguvag5',
         'ja-Hira': 'ruynguvag5'
     },
     'switch-costume': {
         'en': '1ocp6a1ejn',
+        'it': 'nty4xjtqcj',
+        'pt': 'pnlmmv2hs7',
+        'pt-BR': 'pnlmmv2hs7',
         'ja': 'g3vluv0ms8',
         'ja-Hira': 'g3vluv0ms8'
     },
     'move-around-with-arrow-keys': {
         'en': 'yetrmk4iuu',
+        'it': 'jse0g0uddw',
+        'pt': 'erv6eff78p',
+        'pt-BR': 'erv6eff78p',
         'ja': 'fk34dcg5oz',
         'ja-Hira': 'fk34dcg5oz'
     },
     'add-effects': {
         'en': '3jvl8zgjo2',
+        'it': 'q3cjjyfju9',
+        'pt': 'dz6jzpf7hm',
+        'pt-BR': 'dz6jzpf7hm',
         'ja': 'q7zq9vu0wb',
         'ja-Hira': 'q7zq9vu0wb'
     },
@@ -80,6 +120,9 @@ const videos = {
     },
     'pong-game': {
         en: '8m48dv0ens'
+    },
+    'imagine-if': {
+        en: '1ndh08yiso'
     }
 };
 

src/lib/libraries/sprites.json

@@ -9979,6 +9979,83 @@
             "spriteInfo": {}
         }
     },
+    {
+        "name": "Marian",
+        "md5": "e9577a1eb098905dd386135bb38c0398.png",
+        "type": "sprite",
+        "tags": [
+            "people"
+        ],
+        "info": [
+            0,
+            4,
+            1
+        ],
+        "json": {
+            "objName": "Marian",
+            "sounds": [
+                {
+                    "soundName": "Hand Clap",
+                    "soundID": -1,
+                    "md5": "9502142875e67f7b0292a117a27e9563.wav",
+                    "sampleCount": 2464,
+                    "rate": 22050,
+                    "format": ""
+                }
+            ],
+            "costumes": [
+                {
+                    "costumeName": "marian-a",
+                    "baseLayerID": -1,
+                    "baseLayerMD5": "e9577a1eb098905dd386135bb38c0398.png",
+                    "bitmapResolution": 2,
+                    "rotationCenterX": 108.5,
+                    "rotationCenterY": 226
+                },
+                {
+                    "costumeName": "marian-b",
+                    "baseLayerID": -1,
+                    "baseLayerMD5": "3d2ecee35eab8c37d1c3eadfe50ce447.png",
+                    "bitmapResolution": 2,
+                    "rotationCenterX": 108.5,
+                    "rotationCenterY": 226
+                },
+                {
+                    "costumeName": "marian-c",
+                    "baseLayerID": -1,
+                    "baseLayerMD5": "221e9999b20ecc21b37c68fcdf09ab02.png",
+                    "bitmapResolution": 2,
+                    "rotationCenterX": 70.5,
+                    "rotationCenterY": 226
+                },
+                {
+                    "costumeName": "marian-d",
+                    "baseLayerID": -1,
+                    "baseLayerMD5": "64206b46c411e40926569cf3f5e587be.png",
+                    "bitmapResolution": 2,
+                    "rotationCenterX": 139,
+                    "rotationCenterY": 219
+                },
+                {
+                    "costumeName": "marian-e",
+                    "baseLayerID": -1,
+                    "baseLayerMD5": "16893c6136292ae36e13dc72cc55719b.png",
+                    "bitmapResolution": 2,
+                    "rotationCenterX": 69.5,
+                    "rotationCenterY": 211.5
+                }
+            ],
+            "currentCostumeIndex": 0,
+            "scratchX": 143,
+            "scratchY": -71,
+            "scale": 1,
+            "direction": 90,
+            "rotationStyle": "normal",
+            "isDraggable": false,
+            "visible": true,
+            "spriteInfo": {}
+        }
+    },
     {
         "name": "Max",
         "md5": "5cc168bddf4561e6e7f1d30845d6efbf.svg",

src/lib/project-saver-hoc.jsx

@@ -234,9 +234,14 @@ const ProjectSaverHOC = function (WrappedComponent) {
                         asset.dataFormat,
                         asset.data,
                         asset.assetId
-                    ).then(
-                        () => (asset.clean = true)
-                    )
+                    ).then(response => {
+                        // Asset servers respond with {status: ok} for successful POSTs
+                        if (response.status !== 'ok') {
+                            // Errors include a `code` property, e.g. "Forbidden"
+                            return Promise.reject(response.code);
+                        }
+                        asset.clean = true;
+                    })
                 )
             )
                 .then(() => this.props.onUpdateProjectData(projectId, savedVMState, requestParams))

src/lib/save-project-to-server.js

@@ -45,6 +45,7 @@ export default function (projectId, vmState, params) {
     return new Promise((resolve, reject) => {
         xhr(opts, (err, response) => {
             if (err) return reject(err);
+            if (response.statusCode !== 200) return reject(response.statusCode);
             let body;
             try {
                 // Since we didn't set json: true, we have to parse manually

src/lib/vm-listener-hoc.jsx

@@ -60,9 +60,9 @@ const vmListenerHOC = function (WrappedComponent) {
                 this.props.vm.postIOData('userData', {username: this.props.username});
             }
 
-            // Re-request a targets update when the shouldEmitUpdate state changes to true
+            // Re-request a targets update when the shouldUpdateTargets state changes to true
             // i.e. when the editor transitions out of fullscreen/player only modes
-            if (this.props.shouldEmitUpdates && !prevProps.shouldEmitUpdates) {
+            if (this.props.shouldUpdateTargets && !prevProps.shouldUpdateTargets) {
                 this.props.vm.emitTargetsUpdate(false /* Emit the event, but do not trigger project change */);
             }
         }
@@ -74,12 +74,12 @@ const vmListenerHOC = function (WrappedComponent) {
             }
         }
         handleProjectChanged () {
-            if (this.props.shouldEmitUpdates && !this.props.projectChanged) {
+            if (this.props.shouldUpdateProjectChanged && !this.props.projectChanged) {
                 this.props.onProjectChanged();
             }
         }
         handleTargetsUpdate (data) {
-            if (this.props.shouldEmitUpdates) {
+            if (this.props.shouldUpdateTargets) {
                 this.props.onTargetsUpdate(data);
             }
         }
@@ -118,7 +118,8 @@ const vmListenerHOC = function (WrappedComponent) {
                 /* eslint-disable no-unused-vars */
                 attachKeyboardEvents,
                 projectChanged,
-                shouldEmitUpdates,
+                shouldUpdateTargets,
+                shouldUpdateProjectChanged,
                 onBlockDragUpdate,
                 onGreenFlag,
                 onKeyDown,
@@ -158,7 +159,8 @@ const vmListenerHOC = function (WrappedComponent) {
         onTurboModeOff: PropTypes.func.isRequired,
         onTurboModeOn: PropTypes.func.isRequired,
         projectChanged: PropTypes.bool,
-        shouldEmitUpdates: PropTypes.bool,
+        shouldUpdateTargets: PropTypes.bool,
+        shouldUpdateProjectChanged: PropTypes.bool,
         username: PropTypes.string,
         vm: PropTypes.instanceOf(VM).isRequired
     };
@@ -170,8 +172,10 @@ const vmListenerHOC = function (WrappedComponent) {
         projectChanged: state.scratchGui.projectChanged,
         // Do not emit target or project updates in fullscreen or player only mode
         // or when recording sounds (it leads to garbled recordings on low-power machines)
-        shouldEmitUpdates: !state.scratchGui.mode.isFullScreen && !state.scratchGui.mode.isPlayerOnly &&
+        shouldUpdateTargets: !state.scratchGui.mode.isFullScreen && !state.scratchGui.mode.isPlayerOnly &&
             !state.scratchGui.modals.soundRecorder,
+        // Do not update the projectChanged state in fullscreen or player only mode
+        shouldUpdateProjectChanged: !state.scratchGui.mode.isFullScreen && !state.scratchGui.mode.isPlayerOnly,
         vm: state.scratchGui.vm,
         username: state.session && state.session.session && state.session.session.user ?
             state.session.session.user.username : ''

test/.eslintrc.js

@@ -1,9 +1,10 @@
 module.exports = {
-    extends: ['scratch/react', 'scratch/es6'],
+    extends: ['scratch/react', 'scratch/es6', 'plugin:jest/recommended'],
     env: {
         browser: true,
         jest: true
     },
+    plugins: ['jest'],
     rules: {
         'react/prop-types': 0
     }

test/__mocks__/audio-effects.js

@@ -14,7 +14,7 @@ export default class MockAudioEffects {
         this.buffer = buffer;
         this.name = name;
         this.process = jest.fn(done => {
-            this._finishProcessing = renderedBuffer => done({renderedBuffer});
+            this._finishProcessing = renderedBuffer => done(renderedBuffer, 0, 1);
         });
         MockAudioEffects.instance = this;
     }

test/helpers/selenium-helper.js

@@ -1,4 +1,4 @@
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 30000; // eslint-disable-line no-undef
+jest.setTimeout(30000); // eslint-disable-line no-undef
 
 import bindAll from 'lodash.bindall';
 import 'chromedriver'; // register path

test/integration/costumes.test.js

@@ -193,7 +193,11 @@ describe('Working with costumes', () => {
             .mouseMove(abbyElement)
             .perform();
         // wait for one of Abby's alternate costumes to appear
-        await findByXpath('//img[@src="https://cdn.assets.scratch.mit.edu/internalapi/asset/b6e23922f23b49ddc6f62f675e77417c.svg/get/"]');
+        const src1 = await abbyElement.findElement({css: 'img'}).getAttribute('src');
+        await driver.sleep(300);
+        const src2 = await abbyElement.findElement({css: 'img'}).getAttribute('src');
+        const sourcesMatch = (src1 === src2);
+        await expect(sourcesMatch).toBeFalsy(); // 'src' attribute should have changed by now
         const logs = await getLogs();
         await expect(logs).toEqual([]);
     });

test/integration/sounds.test.js

@@ -1,5 +1,6 @@
 import path from 'path';
 import SeleniumHelper from '../helpers/selenium-helper';
+import {Key} from 'selenium-webdriver';
 
 const {
     clickText,
@@ -55,7 +56,6 @@ describe('Working with sounds', () => {
         await clickText('Faster');
         await clickText('Slower');
         await clickText('Robot');
-        await clickText('Echo');
         await clickText('Reverse');
 
         const logs = await getLogs();
@@ -112,7 +112,7 @@ describe('Working with sounds', () => {
         await expect(logs).toEqual([]);
     });
 
-    test.only('Adding multiple sounds at the same time', async () => {
+    test('Adding multiple sounds at the same time', async () => {
         const files = [
             path.resolve(__dirname, '../fixtures/movie.wav'),
             path.resolve(__dirname, '../fixtures/sneaker.wav')
@@ -132,4 +132,56 @@ describe('Working with sounds', () => {
         const logs = await getLogs();
         await expect(logs).toEqual([]);
     });
+
+    test('Copy to new button adds a new sound', async () => {
+        await loadUri(uri);
+        await clickText('Sounds');
+        await clickText('Copy to New', scope.soundsTab);
+        await clickText('Meow2', scope.soundsTab);
+
+        const logs = await getLogs();
+        await expect(logs).toEqual([]);
+    });
+
+    test('Copy and pasting within a sound changes its duration', async () => {
+        await loadUri(uri);
+        await clickText('Sounds');
+        await findByText('0.85', scope.soundsTab); // Original meow sound duration
+        await clickText('Copy', scope.soundsTab);
+        await clickText('Paste', scope.soundsTab);
+        await findByText('1.70', scope.soundsTab); // Sound has doubled in duration
+
+        const logs = await getLogs();
+        await expect(logs).toEqual([]);
+    });
+
+    test('Can copy a sound from a sprite and paste into a sound on the stage', async () => {
+        await loadUri(uri);
+        await clickText('Sounds');
+        await clickText('Copy', scope.soundsTab); // Copy the meow sound
+        await clickXpath('//span[text()="Stage"]');
+        await findByText('0.02', scope.soundsTab); // Original pop sound duration
+        await clickText('Paste', scope.soundsTab);
+        await findByText('0.87', scope.soundsTab); // Duration of pop + meow sound
+
+        const logs = await getLogs();
+        await expect(logs).toEqual([]);
+    });
+
+    test('Keyboard shortcuts', async () => {
+        await loadUri(uri);
+        await clickText('Sounds');
+        const el = await findByXpath('//button[@aria-label="Choose a Sound"]');
+        await el.sendKeys(Key.chord(Key.COMMAND, 'a')); // Select all
+        await findByText('0.85', scope.soundsTab); // Meow sound duration
+        await el.sendKeys(Key.DELETE);
+        await findByText('0.00', scope.soundsTab); // Sound is now empty
+        await el.sendKeys(Key.chord(Key.COMMAND, 'z')); // undo
+        await findByText('0.85', scope.soundsTab); // Meow sound is back
+        await el.sendKeys(Key.chord(Key.COMMAND, Key.SHIFT, 'z')); // redo
+        await findByText('0.00', scope.soundsTab); // Sound is empty again
+
+        const logs = await getLogs();
+        await expect(logs).toEqual([]);
+    });
 });

test/integration/sprites.test.js

@@ -75,7 +75,7 @@ describe('Working with sprites', () => {
     test('Deleting by x button on sprite tile', async () => {
         await loadUri(uri);
         await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
-        await clickXpath('//*[@aria-label="Close"]'); // Only visible close button is on the sprite
+        await clickXpath('//*[@aria-label="Delete"]'); // Only visible close button is on the sprite
         // Confirm that the stage has been switched to
         await findByText('Stage selected: no motion blocks');
         const logs = await getLogs();

test/unit/components/__snapshots__/sound-editor.test.jsx.snap

@@ -3,6 +3,7 @@
 exports[`Sound Editor Component matches snapshot 1`] = `
 <div
   className={undefined}
+  onMouseDown={undefined}
 >
   <div
     className={undefined}
@@ -59,7 +60,59 @@ exports[`Sound Editor Component matches snapshot 1`] = `
       </div>
     </div>
     <div
-      className="undefined"
+      className={undefined}
+    >
+      <div
+        className=""
+        onClick={undefined}
+        role="button"
+      >
+        <img
+          className={undefined}
+          draggable={false}
+          src="test-file-stub"
+        />
+        <div
+          className={undefined}
+        >
+          Copy
+        </div>
+      </div>
+      <div
+        className=""
+        onClick={undefined}
+        role="button"
+      >
+        <img
+          className={undefined}
+          draggable={false}
+          src="test-file-stub"
+        />
+        <div
+          className={undefined}
+        >
+          Paste
+        </div>
+      </div>
+      <div
+        className=""
+        onClick={undefined}
+        role="button"
+      >
+        <img
+          className={undefined}
+          draggable={false}
+          src="test-file-stub"
+        />
+        <div
+          className={undefined}
+        >
+          Copy to New
+        </div>
+      </div>
+    </div>
+    <div
+      className=""
       onClick={[Function]}
       role="button"
     >
@@ -71,9 +124,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
       <div
         className={undefined}
       >
-        <span>
-          Save
-        </span>
+        Delete
       </div>
     </div>
   </div>
@@ -85,33 +136,26 @@ exports[`Sound Editor Component matches snapshot 1`] = `
     >
       <svg
         className={undefined}
-        viewBox="-1 0 600 160"
+        viewBox="0 0 600 160"
       >
-        <line
-          className={undefined}
-          x1={-1}
-          x2={600}
-          y1={80}
-          y2={80}
-        />
         <g
           transform="scale(1, -1) translate(0, -80)"
         >
           <path
             className={undefined}
-            d="M0 0Q0 0 60 40 Q120 80 180 120 Q240 160 300 200 Q360 240 420 120 Q480 0 480 0 Q480 0 420 -120 Q360 -240 300 -200 Q240 -160 180 -120 Q120 -80 60 -40 Q0 0 0 0Z"
+            d="M0 0Q0 80 150 120 Q300 160 450 200 Q600 240 600 0 Q600 -240 450 -200 Q300 -160 150 -120 Q0 -80 0 0Z"
             strokeLinejoin="round"
             strokeWidth={1}
           />
         </g>
       </svg>
       <div
-        className={undefined}
+        className=""
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
       >
         <div
           className=""
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
           style={
             Object {
               "alignContent": undefined,
@@ -124,7 +168,8 @@ exports[`Sound Editor Component matches snapshot 1`] = `
               "flexWrap": undefined,
               "height": undefined,
               "justifyContent": undefined,
-              "width": "20%",
+              "left": "20%",
+              "width": "60.00000000000001%",
             }
           }
         >
@@ -148,6 +193,73 @@ exports[`Sound Editor Component matches snapshot 1`] = `
           />
           <div
             className=""
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+            style={
+              Object {
+                "alignContent": undefined,
+                "alignItems": undefined,
+                "alignSelf": undefined,
+                "flexBasis": undefined,
+                "flexDirection": undefined,
+                "flexGrow": undefined,
+                "flexShrink": undefined,
+                "flexWrap": undefined,
+                "height": undefined,
+                "justifyContent": undefined,
+                "width": undefined,
+              }
+            }
+          >
+            <div
+              className=""
+              style={
+                Object {
+                  "alignContent": undefined,
+                  "alignItems": undefined,
+                  "alignSelf": undefined,
+                  "flexBasis": undefined,
+                  "flexDirection": undefined,
+                  "flexGrow": undefined,
+                  "flexShrink": undefined,
+                  "flexWrap": undefined,
+                  "height": undefined,
+                  "justifyContent": undefined,
+                  "width": undefined,
+                }
+              }
+            >
+              <img
+                src="test-file-stub"
+              />
+            </div>
+            <div
+              className=""
+              style={
+                Object {
+                  "alignContent": undefined,
+                  "alignItems": undefined,
+                  "alignSelf": undefined,
+                  "flexBasis": undefined,
+                  "flexDirection": undefined,
+                  "flexGrow": undefined,
+                  "flexShrink": undefined,
+                  "flexWrap": undefined,
+                  "height": undefined,
+                  "justifyContent": undefined,
+                  "width": undefined,
+                }
+              }
+            >
+              <img
+                src="test-file-stub"
+              />
+            </div>
+          </div>
+          <div
+            className=""
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
             style={
               Object {
                 "alignContent": undefined,
@@ -222,109 +334,6 @@ exports[`Sound Editor Component matches snapshot 1`] = `
             }
           />
         </div>
-        <div
-          className=""
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-          style={
-            Object {
-              "alignContent": undefined,
-              "alignItems": undefined,
-              "alignSelf": undefined,
-              "flexBasis": undefined,
-              "flexDirection": undefined,
-              "flexGrow": undefined,
-              "flexShrink": undefined,
-              "flexWrap": undefined,
-              "height": undefined,
-              "justifyContent": undefined,
-              "left": "80%",
-              "width": "20%",
-            }
-          }
-        >
-          <div
-            className=""
-            style={
-              Object {
-                "alignContent": undefined,
-                "alignItems": undefined,
-                "alignSelf": undefined,
-                "flexBasis": undefined,
-                "flexDirection": undefined,
-                "flexGrow": undefined,
-                "flexShrink": undefined,
-                "flexWrap": undefined,
-                "height": undefined,
-                "justifyContent": undefined,
-                "width": undefined,
-              }
-            }
-          />
-          <div
-            className=""
-            style={
-              Object {
-                "alignContent": undefined,
-                "alignItems": undefined,
-                "alignSelf": undefined,
-                "flexBasis": undefined,
-                "flexDirection": undefined,
-                "flexGrow": undefined,
-                "flexShrink": undefined,
-                "flexWrap": undefined,
-                "height": undefined,
-                "justifyContent": undefined,
-                "width": undefined,
-              }
-            }
-          >
-            <div
-              className=""
-              style={
-                Object {
-                  "alignContent": undefined,
-                  "alignItems": undefined,
-                  "alignSelf": undefined,
-                  "flexBasis": undefined,
-                  "flexDirection": undefined,
-                  "flexGrow": undefined,
-                  "flexShrink": undefined,
-                  "flexWrap": undefined,
-                  "height": undefined,
-                  "justifyContent": undefined,
-                  "width": undefined,
-                }
-              }
-            >
-              <img
-                src="test-file-stub"
-              />
-            </div>
-            <div
-              className=""
-              style={
-                Object {
-                  "alignContent": undefined,
-                  "alignItems": undefined,
-                  "alignSelf": undefined,
-                  "flexBasis": undefined,
-                  "flexDirection": undefined,
-                  "flexGrow": undefined,
-                  "flexShrink": undefined,
-                  "flexWrap": undefined,
-                  "height": undefined,
-                  "justifyContent": undefined,
-                  "width": undefined,
-                }
-              }
-            >
-              <img
-                src="test-file-stub"
-              />
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -381,42 +390,6 @@ exports[`Sound Editor Component matches snapshot 1`] = `
         </span>
       </div>
     </div>
-    <div
-      className=""
-      onClick={[Function]}
-      role="button"
-    >
-      <img
-        className={undefined}
-        draggable={false}
-        src="test-file-stub"
-      />
-      <div
-        className={undefined}
-      >
-        <span>
-          Echo
-        </span>
-      </div>
-    </div>
-    <div
-      className=""
-      onClick={[Function]}
-      role="button"
-    >
-      <img
-        className={undefined}
-        draggable={false}
-        src="test-file-stub"
-      />
-      <div
-        className={undefined}
-      >
-        <span>
-          Robot
-        </span>
-      </div>
-    </div>
     <div
       className=""
       onClick={[Function]}
@@ -453,6 +426,60 @@ exports[`Sound Editor Component matches snapshot 1`] = `
         </span>
       </div>
     </div>
+    <div
+      className=""
+      onClick={undefined}
+      role="button"
+    >
+      <img
+        className={undefined}
+        draggable={false}
+        src="test-file-stub"
+      />
+      <div
+        className={undefined}
+      >
+        <span>
+          Mute
+        </span>
+      </div>
+    </div>
+    <div
+      className=""
+      onClick={undefined}
+      role="button"
+    >
+      <img
+        className={undefined}
+        draggable={false}
+        src="test-file-stub"
+      />
+      <div
+        className={undefined}
+      >
+        <span>
+          Fade in
+        </span>
+      </div>
+    </div>
+    <div
+      className=""
+      onClick={undefined}
+      role="button"
+    >
+      <img
+        className={undefined}
+        draggable={false}
+        src="test-file-stub"
+      />
+      <div
+        className={undefined}
+      >
+        <span>
+          Fade out
+        </span>
+      </div>
+    </div>
     <div
       className=""
       onClick={[Function]}
@@ -471,6 +498,24 @@ exports[`Sound Editor Component matches snapshot 1`] = `
         </span>
       </div>
     </div>
+    <div
+      className=""
+      onClick={[Function]}
+      role="button"
+    >
+      <img
+        className={undefined}
+        draggable={false}
+        src="test-file-stub"
+      />
+      <div
+        className={undefined}
+      >
+        <span>
+          Robot
+        </span>
+      </div>
+    </div>
   </div>
 </div>
 `;

test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap

@@ -46,16 +46,20 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
     </div>
   </div>
   <div
-    aria-label="Close"
+    aria-label="Delete"
     className=""
     onClick={[Function]}
     role="button"
-    tabIndex="0"
+    tabIndex={0}
   >
-    <img
-      className=""
-      src="test-file-stub"
-    />
+    <div
+      className={undefined}
+    >
+      <img
+        className={undefined}
+        src="test-file-stub"
+      />
+    </div>
   </div>
   <nav
     className="react-contextmenu"
@@ -126,16 +130,20 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
     </div>
   </div>
   <div
-    aria-label="Close"
+    aria-label="Delete"
     className=""
     onClick={[Function]}
     role="button"
-    tabIndex="0"
+    tabIndex={0}
   >
-    <img
-      className=""
-      src="test-file-stub"
-    />
+    <div
+      className={undefined}
+    >
+      <img
+        className={undefined}
+        src="test-file-stub"
+      />
+    </div>
   </div>
   <nav
     className="react-contextmenu"

test/unit/components/sound-editor.test.jsx

@@ -13,8 +13,8 @@ describe('Sound Editor Component', () => {
             playhead: 0.5,
             trimStart: 0.2,
             trimEnd: 0.8,
-            onActivateTrim: jest.fn(),
             onChangeName: jest.fn(),
+            onDelete: jest.fn(),
             onPlay: jest.fn(),
             onRedo: jest.fn(),
             onReverse: jest.fn(),
@@ -36,19 +36,7 @@ describe('Sound Editor Component', () => {
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    test('trim button appears when trims are null', () => {
-        const wrapper = mountWithIntl(
-            <SoundEditor
-                {...props}
-                trimEnd={null}
-                trimStart={null}
-            />
-        );
-        wrapper.find('[children="Trim"]').simulate('click');
-        expect(props.onActivateTrim).toHaveBeenCalled();
-    });
-
-    test('save button appears when trims are not null', () => {
+    test('delete button appears when selection is not null', () => {
         const wrapper = mountWithIntl(
             <SoundEditor
                 {...props}
@@ -56,8 +44,8 @@ describe('Sound Editor Component', () => {
                 trimStart={0.25}
             />
         );
-        wrapper.find('[children="Save"]').simulate('click');
-        expect(props.onActivateTrim).toHaveBeenCalled();
+        wrapper.find('[children="Delete"]').simulate('click');
+        expect(props.onDelete).toHaveBeenCalled();
     });
 
     test('play button appears when playhead is null', () => {
@@ -100,9 +88,6 @@ describe('Sound Editor Component', () => {
         wrapper.find('[children="Reverse"]').simulate('click');
         expect(props.onReverse).toHaveBeenCalled();
 
-        wrapper.find('[children="Echo"]').simulate('click');
-        expect(props.onEcho).toHaveBeenCalled();
-
         wrapper.find('[children="Robot"]').simulate('click');
         expect(props.onRobot).toHaveBeenCalled();
 

test/unit/components/sprite-selector-item.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithIntl, shallowWithIntl, componentWithIntl} from '../../helpers/intl-helpers.jsx';
 import SpriteSelectorItemComponent from '../../../src/components/sprite-selector-item/sprite-selector-item';
-import CloseButton from '../../../src/components/close-button/close-button';
+import DeleteButton from '../../../src/components/delete-button/delete-button';
 
 describe('SpriteSelectorItemComponent', () => {
     let className;
@@ -56,7 +56,7 @@ describe('SpriteSelectorItemComponent', () => {
     test('does not have a close box when not selected', () => {
         selected = false;
         const wrapper = shallowWithIntl(getComponent());
-        expect(wrapper.find(CloseButton).exists()).toBe(false);
+        expect(wrapper.find(DeleteButton).exists()).toBe(false);
     });
 
     test('triggers callback when Box component is clicked', () => {
@@ -68,7 +68,7 @@ describe('SpriteSelectorItemComponent', () => {
 
     test('triggers callback when CloseButton component is clicked', () => {
         const wrapper = shallowWithIntl(getComponent());
-        wrapper.find(CloseButton).simulate('click');
+        wrapper.find(DeleteButton).simulate('click');
         expect(onDeleteButtonClick).toHaveBeenCalled();
     });
 

test/unit/containers/slider-prompt.test.jsx

@@ -55,7 +55,7 @@ describe('Slider Prompt Container', () => {
         const componentProps = wrapper.find(SliderPromptComponent).props();
         componentProps.onChangeMin({target: {value: '1.0'}});
         componentProps.onOk();
-        expect(onOk).toBeCalledWith(1, 100, false);
+        expect(onOk).toHaveBeenCalledWith(1, 100, false);
     });
 
     test('Entering integers submits with isDiscrete=true', () => {
@@ -72,7 +72,7 @@ describe('Slider Prompt Container', () => {
         componentProps.onChangeMin({target: {value: '1'}});
         componentProps.onChangeMax({target: {value: '2'}});
         componentProps.onOk();
-        expect(onOk).toBeCalledWith(1, 2, true);
+        expect(onOk).toHaveBeenCalledWith(1, 2, true);
     });
 
     test('Enter button submits the form', () => {
@@ -89,7 +89,7 @@ describe('Slider Prompt Container', () => {
         componentProps.onChangeMin({target: {value: '1'}});
         componentProps.onChangeMax({target: {value: '2'}});
         componentProps.onKeyPress({key: 'Enter'});
-        expect(onOk).toBeCalledWith(1, 2, true);
+        expect(onOk).toHaveBeenCalledWith(1, 2, true);
     });
 
     test('Validates number-ness before submitting', () => {
@@ -105,7 +105,7 @@ describe('Slider Prompt Container', () => {
         const componentProps = wrapper.find(SliderPromptComponent).props();
         componentProps.onChangeMin({target: {value: 'hello'}});
         componentProps.onOk();
-        expect(onOk).not.toBeCalled();
-        expect(onCancel).toBeCalled();
+        expect(onOk).not.toHaveBeenCalled();
+        expect(onCancel).toHaveBeenCalled();
     });
 });

test/unit/containers/sound-editor.test.jsx

@@ -85,29 +85,6 @@ describe('Sound Editor Container', () => {
         expect(component.props().playhead).toEqual(null);
     });
 
-    test('it sets the component props for trimming and submits to the vm', () => {
-        const wrapper = mountWithIntl(
-            <SoundEditor
-                soundIndex={soundIndex}
-                store={store}
-            />
-        );
-        let component = wrapper.find(SoundEditorComponent);
-
-        component.props().onActivateTrim();
-        wrapper.update();
-        component = wrapper.find(SoundEditorComponent);
-        expect(component.props().trimStart).not.toEqual(null);
-        expect(component.props().trimEnd).not.toEqual(null);
-
-        component.props().onActivateTrim();
-        wrapper.update();
-        component = wrapper.find(SoundEditorComponent);
-        expect(vm.updateSoundBuffer).toHaveBeenCalled();
-        expect(component.props().trimStart).toEqual(null);
-        expect(component.props().trimEnd).toEqual(null);
-    });
-
     test('it submits name changes to the vm', () => {
         const wrapper = mountWithIntl(
             <SoundEditor
@@ -238,8 +215,8 @@ describe('Sound Editor Container', () => {
         expect(component.prop('canRedo')).toEqual(false);
 
         // Submitting new samples should make it possible to undo
-        component.props().onActivateTrim(); // Activate trimming
-        component.props().onActivateTrim(); // Submit new samples by calling again
+        component.props().onFaster();
+        mockAudioEffects.instance._finishProcessing(soundBuffer);
         wrapper.update();
         component = wrapper.find(SoundEditorComponent);
         expect(component.prop('canUndo')).toEqual(true);
@@ -264,8 +241,8 @@ describe('Sound Editor Container', () => {
         wrapper.update();
         component = wrapper.find(SoundEditorComponent);
         expect(component.prop('canRedo')).toEqual(true);
-        component.props().onActivateTrim(); // Activate trimming
-        component.props().onActivateTrim(); // Submit new samples by calling again
+        component.props().onFaster();
+        mockAudioEffects.instance._finishProcessing(soundBuffer);
 
         wrapper.update();
         component = wrapper.find(SoundEditorComponent);
@@ -282,8 +259,8 @@ describe('Sound Editor Container', () => {
         let component = wrapper.find(SoundEditorComponent);
 
         // Set up an undoable state
-        component.props().onActivateTrim(); // Activate trimming
-        component.props().onActivateTrim(); // Submit new samples by calling again
+        component.props().onFaster();
+        mockAudioEffects.instance._finishProcessing(soundBuffer);
         wrapper.update();
         component = wrapper.find(SoundEditorComponent);
 

test/unit/containers/sprite-selector-item.test.jsx

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import {Provider} from 'react-redux';
 
 import SpriteSelectorItem from '../../../src/containers/sprite-selector-item';
-import CloseButton from '../../../src/components/close-button/close-button';
+import DeleteButton from '../../../src/components/delete-button/delete-button';
 
 describe('SpriteSelectorItem Container', () => {
     const mockStore = configureStore();
@@ -52,7 +52,7 @@ describe('SpriteSelectorItem Container', () => {
 
     test('should delete the sprite', () => {
         const wrapper = mountWithIntl(getContainer());
-        wrapper.find(CloseButton).simulate('click');
+        wrapper.find(DeleteButton).simulate('click');
         expect(onDeleteButtonClick).toHaveBeenCalledWith(1337);
     });
 });

test/unit/util/audio-effects.test.js

@@ -14,25 +14,58 @@ describe('Audio Effects manager', () => {
     const audioBuffer = audioContext.createBuffer(1, 400, 44100);
 
     test('changes buffer length and playback rate for faster effect', () => {
-        const audioEffects = new AudioEffects(audioBuffer, 'faster');
+        const audioEffects = new AudioEffects(audioBuffer, 'faster', 0, 1);
         expect(audioEffects.audioContext._.length).toBeLessThan(400);
-        expect(audioEffects.source.playbackRate.value).toBeGreaterThan(1);
     });
 
     test('changes buffer length  and playback rate for slower effect', () => {
-        const audioEffects = new AudioEffects(audioBuffer, 'slower');
+        const audioEffects = new AudioEffects(audioBuffer, 'slower', 0, 1);
         expect(audioEffects.audioContext._.length).toBeGreaterThan(400);
-        expect(audioEffects.source.playbackRate.value).toBeLessThan(1);
     });
 
     test('changes buffer length for echo effect', () => {
-        const audioEffects = new AudioEffects(audioBuffer, 'echo');
+        const audioEffects = new AudioEffects(audioBuffer, 'echo', 0, 1);
         expect(audioEffects.audioContext._.length).toBeGreaterThan(400);
     });
 
+    test('updates the trim positions after an effect has changed the length of selection', () => {
+        const slowerEffect = new AudioEffects(audioBuffer, 'slower', 0.25, 0.75);
+        expect(slowerEffect.adjustedTrimStartSeconds).toEqual(slowerEffect.trimStartSeconds);
+        expect(slowerEffect.adjustedTrimEndSeconds).toBeGreaterThan(slowerEffect.trimEndSeconds);
+
+        const fasterEffect = new AudioEffects(audioBuffer, 'faster', 0.25, 0.75);
+        expect(fasterEffect.adjustedTrimStartSeconds).toEqual(fasterEffect.trimStartSeconds);
+        expect(fasterEffect.adjustedTrimEndSeconds).toBeLessThan(fasterEffect.trimEndSeconds);
+
+        // Some effects do not change the length of the selection
+        const fadeEffect = new AudioEffects(audioBuffer, 'fade in', 0.25, 0.75);
+        expect(fadeEffect.adjustedTrimStartSeconds).toEqual(fadeEffect.trimStartSeconds);
+        // Should be within one millisecond (flooring can change the duration by one sample)
+        expect(fadeEffect.adjustedTrimEndSeconds).toBeCloseTo(fadeEffect.trimEndSeconds, 3);
+    });
+
     test.skip('process starts the offline rendering context and returns a promise', () => {
         // @todo haven't been able to get web audio test api to actually run render
     });
+
+    test('reverse effect strictly reverses the samples', () => {
+        const fakeSound = [1, 2, 3, 4, 5, 6, 7, 8];
+
+        const fakeBuffer = audioContext.createBuffer(1, 8, 44100);
+        const bufferData = fakeBuffer.getChannelData(0);
+        fakeSound.forEach((sample, index) => {
+            bufferData[index] = sample;
+        });
+
+        // Reverse the entire sound
+        const reverseAll = new AudioEffects(fakeBuffer, 'reverse', 0, 1);
+        expect(Array.from(reverseAll.buffer.getChannelData(0))).toEqual(fakeSound.reverse());
+
+        // Reverse part of the sound
+        const reverseSelection = new AudioEffects(fakeBuffer, 'reverse', 0.25, 0.75);
+        const selectionReversed = [1, 2, 6, 5, 4, 3, 7, 8];
+        expect(Array.from(reverseSelection.buffer.getChannelData(0))).toEqual(selectionReversed);
+    });
 });
 
 describe('Effects', () => {
@@ -43,15 +76,15 @@ describe('Effects', () => {
     });
 
     test('all effects provide an input and output that are connected', () => {
-        const robotEffect = new RobotEffect(audioContext, 0.5);
+        const robotEffect = new RobotEffect(audioContext, 0, 1);
         expect(robotEffect.input).toBeInstanceOf(AudioNode);
         expect(robotEffect.output).toBeInstanceOf(AudioNode);
 
-        const echoEffect = new EchoEffect(audioContext, 0.5);
+        const echoEffect = new EchoEffect(audioContext, 0, 1);
         expect(echoEffect.input).toBeInstanceOf(AudioNode);
         expect(echoEffect.output).toBeInstanceOf(AudioNode);
 
-        const volumeEffect = new VolumeEffect(audioContext, 0.5);
+        const volumeEffect = new VolumeEffect(audioContext, 0.5, 0, 1);
         expect(volumeEffect.input).toBeInstanceOf(AudioNode);
         expect(volumeEffect.output).toBeInstanceOf(AudioNode);
     });

test/unit/util/drag-recognizer.test.js

@@ -18,25 +18,25 @@ describe('DragRecognizer', () => {
     test('start -> small drag', () => {
         dragRecognizer.start({clientX: 100, clientY: 100});
         window.dispatchEvent(new MouseEvent('mousemove', {clientX: 101, clientY: 101}));
-        expect(onDrag).not.toBeCalled();
+        expect(onDrag).not.toHaveBeenCalled();
     });
 
     test('start -> large vertical touch move -> scroll, not drag', () => {
         dragRecognizer.start({clientX: 100, clientY: 100});
         window.dispatchEvent(new MouseEvent('touchmove', {clientX: 106, clientY: 150}));
-        expect(onDrag).not.toBeCalled();
+        expect(onDrag).not.toHaveBeenCalled();
     });
 
     test('start -> large vertical mouse move -> mouse moves always drag)', () => {
         dragRecognizer.start({clientX: 100, clientY: 100});
         window.dispatchEvent(new MouseEvent('mousemove', {clientX: 100, clientY: 150}));
-        expect(onDrag).toBeCalled();
+        expect(onDrag).toHaveBeenCalled();
     });
 
     test('start -> large horizontal touch move -> drag', () => {
         dragRecognizer.start({clientX: 100, clientY: 100});
         window.dispatchEvent(new MouseEvent('touchmove', {clientX: 150, clientY: 106}));
-        expect(onDrag).toBeCalled();
+        expect(onDrag).toHaveBeenCalled();
     });
 
     test('after starting a scroll, it cannot become a drag', () => {
@@ -44,7 +44,7 @@ describe('DragRecognizer', () => {
         window.dispatchEvent(new MouseEvent('touchmove', {clientX: 100, clientY: 110}));
         window.dispatchEvent(new MouseEvent('touchmove', {clientX: 100, clientY: 100}));
         window.dispatchEvent(new MouseEvent('touchmove', {clientX: 110, clientY: 100}));
-        expect(onDrag).not.toBeCalled();
+        expect(onDrag).not.toHaveBeenCalled();
     });
 
     test('start -> end unbinds', () => {
@@ -56,6 +56,17 @@ describe('DragRecognizer', () => {
         expect(onDrag).toHaveBeenCalledTimes(1); // Still 1
     });
 
+    test('start -> end calls dragEnd callback after resetting internal state', done => {
+        onDragEnd = () => {
+            expect(dragRecognizer.gestureInProgress()).toBe(false);
+            done();
+        };
+        dragRecognizer = new DragRecognizer({onDrag, onDragEnd});
+        dragRecognizer.start({clientX: 100, clientY: 100});
+        window.dispatchEvent(new MouseEvent('touchmove', {clientX: 150, clientY: 106}));
+        window.dispatchEvent(new MouseEvent('touchend', {clientX: 150, clientY: 106}));
+    });
+
     test('start -> reset unbinds', () => {
         dragRecognizer.start({clientX: 100, clientY: 100});
         window.dispatchEvent(new MouseEvent('touchmove', {clientX: 150, clientY: 106}));

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

@@ -423,7 +423,7 @@ describe('projectSaverHOC', () => {
         expect(mockedOnRemixing).toHaveBeenCalledWith(true);
     });
 
-    test('when starting to remix, onRemixing should be called with param true', () => {
+    test('when starting to remix, onRemixing should be called with param false', () => {
         const mockedOnRemixing = jest.fn();
         const mockedStoreProject = jest.fn(() => Promise.resolve());
         const Component = () => <div />;

test/unit/util/vm-listener-hoc.test.jsx

@@ -91,4 +91,46 @@ describe('VMListenerHOC', () => {
         const actions = store.getActions();
         expect(actions.length).toEqual(0);
     });
+
+    test('PROJECT_CHANGED does dispatch if the sound recorder is visible', () => {
+        const Component = () => (<div />);
+        const WrappedComponent = vmListenerHOC(Component);
+        store = mockStore({
+            scratchGui: {
+                mode: {},
+                modals: {soundRecorder: true},
+                vm: vm
+            }
+        });
+        mount(
+            <WrappedComponent
+                store={store}
+                vm={vm}
+            />
+        );
+        vm.emit('PROJECT_CHANGED');
+        const actions = store.getActions();
+        expect(actions.length).toEqual(1);
+    });
+
+    test('PROJECT_CHANGED does not dispatch if in fullscreen mode', () => {
+        const Component = () => (<div />);
+        const WrappedComponent = vmListenerHOC(Component);
+        store = mockStore({
+            scratchGui: {
+                mode: {isFullScreen: true},
+                modals: {soundRecorder: true},
+                vm: vm
+            }
+        });
+        mount(
+            <WrappedComponent
+                store={store}
+                vm={vm}
+            />
+        );
+        vm.emit('PROJECT_CHANGED');
+        const actions = store.getActions();
+        expect(actions.length).toEqual(0);
+    });
 });

webpack.config.js

@@ -55,10 +55,7 @@ const base = {
                     ['react-intl', {
                         messagesDir: './translations/messages/'
                     }]],
-                presets: [
-                    ['@babel/preset-env', {targets: {browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']}}],
-                    '@babel/preset-react'
-                ]
+                presets: ['@babel/preset-env', '@babel/preset-react']
             }
         },
         {
@@ -81,9 +78,7 @@ const base = {
                         return [
                             postcssImport,
                             postcssVars,
-                            autoprefixer({
-                                browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']
-                            })
+                            autoprefixer
                         ];
                     }
                 }