Merge pull request #5976 from LLK/dependabot/npm_and_yarn/scratch-blocks-0.1.0-prerelease.20200709183415

build(deps-dev): bump scratch-blocks
Bumps [scratch-blocks](https://github.com/LLK/scratch-blocks) from 0.1.0-prerelease.20200630140237 to 0.1.0-prerelease.20200709183415. - [Release notes](https://github.com/LLK/scratch-blocks/releases) - [Commits](https://github.com/LLK/scratch-blocks/commits) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
2020-07-09 20:50:47 +00:00 · 2020-07-09 20:40:54 +00:00 · 2020-07-09 20:30:01 +00:00 · 2020-07-09 20:20:28 +00:00 · 2020-07-09 08:55:50 -07:00 · 2020-07-08 03:35:58 +00:00
546 changed files with 45079 additions and 14005 deletions
@@ -0,0 +1,3 @@
+last 3 versions
+Safari >= 8
+iOS >= 8
@@ -0,0 +1,207 @@
+version: 2.1
+aliases:
+  - &save_git_cache
+    save_cache:
+      paths:
+        - .git
+      key: v1-git-{{ .Revision }}
+  - &restore_git_cache
+    restore_cache:
+      keys:
+        - v1-git-{{ .Revision }}
+        - v1-git-
+  - &save_build_cache
+    save_cache:
+      paths:
+        - build
+      key: v1-build-{{ .Revision }}
+  - &restore_build_cache
+    restore_cache:
+      keys:
+        - v1-build-{{ .Revision }}
+  - &save_dist_cache
+    save_cache:
+      paths:
+        - dist
+      key: v1-dist-{{ .Revision }}
+  - &restore_dist_cache
+    restore_cache:
+      keys:
+        - v1-dist-{{ .Revision }}
+  - &save_npm_cache
+    save_cache:
+      paths:
+        - node_modules
+      key: v1-npm-{{ checksum "package-lock.json" }}
+  - &restore_npm_cache
+    restore_cache:
+      keys:
+        - v1-npm-{{ checksum "package-lock.json" }}
+        - v1-npm-
+  - &defaults
+    docker:
+      - image: circleci/node:8.16-browsers
+    working_directory: ~/repo
+
+jobs:
+  setup:
+    <<: *defaults
+    steps:
+      - *restore_git_cache
+      - checkout
+      - *restore_npm_cache
+      - run: npm install
+      - *save_git_cache
+      - *save_npm_cache
+  lint:
+    <<: *defaults
+    steps:
+      - *restore_git_cache
+      - checkout
+      - *restore_npm_cache
+      - run:
+          name: Lint
+          command: npm run test:lint -- --quiet --output-file test-results/eslint/results.xml --format junit
+      - store_test_results:
+          path: test-results
+  unit:
+    <<: *defaults
+    environment:
+      JEST_JUNIT_OUTPUT_NAME: results.xml
+    steps:
+      - *restore_git_cache
+      - checkout
+      - *restore_npm_cache
+      - run:
+          name: Unit
+          environment:
+              JEST_JUNIT_OUTPUT_DIR: test-results/unit
+          command: npm run test:unit -- --reporters="default" --reporters="jest-junit" --coverage --coverageReporters=text --coverageReporters=lcov
+      - store_artifacts:
+          path: coverage
+      - store_test_results:
+          path: test-results
+  build:
+    <<: *defaults
+    environment:
+      NODE_ENV: production
+      NODE_OPTIONS: --max-old-space-size=4000
+    steps:
+      - *restore_git_cache
+      - checkout
+      - *restore_npm_cache
+      - run:
+          name: Build
+          command: npm run build
+      - *save_build_cache
+      - *save_dist_cache
+  store_build:
+    <<: *defaults
+    steps:
+      - *restore_build_cache
+      - store_artifacts:
+          path: build
+  store_dist:
+    <<: *defaults
+    steps:
+      - *restore_dist_cache
+      - store_artifacts:
+          path: dist
+  integration:
+    <<: *defaults
+    parallelism: 2
+    environment:
+      JEST_JUNIT_OUTPUT_NAME: results.txt
+    steps:
+      - *restore_git_cache
+      - checkout
+      - *restore_npm_cache
+      - *restore_build_cache
+      - run:
+          name: Integration
+          environment:
+              JEST_JUNIT_OUTPUT_DIR: test-results/integration
+          command: |
+            export TESTFILES=$(circleci tests glob "test/integration/*.test.js" | circleci tests split --split-by=timings)
+            $(npm bin)/jest ${TESTFILES} --reporters="default" --reporters="jest-junit"
+      - store_test_results:
+          path: test-results
+
+  deploy-npm:
+    <<: *defaults
+    environment:
+      NODE_OPTIONS: --max-old-space-size=4000
+    steps:
+      - *restore_git_cache
+      - *restore_dist_cache
+      - checkout
+      - run: |
+          echo export RELEASE_VERSION="0.1.0-prerelease.$(date +'%Y%m%d%H%M%S')" >> $BASH_ENV
+          echo export NPM_TAG=circlelatest >> $BASH_ENV
+          if [ "$CIRCLE_BRANCH" == "master" ]
+            then echo export NPM_TAG=circlestable >> $BASH_ENV
+          fi
+          if [[ "$CIRCLE_BRANCH" == hotfix/* ]] # double brackets are important for matching the wildcard
+            then echo export NPM_TAG=circlehotfix >> $BASH_ENV
+          fi
+      - run: npm version --no-git-tag-version $RELEASE_VERSION
+      - run: |
+          npm set //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          npm publish --tag $NPM_TAG
+      - run: git tag $RELEASE_VERSION
+      - run: git push $CIRCLE_REPOSITORY_URL $RELEASE_VERSION
+
+  deploy-gh-pages:
+    <<: *defaults
+    steps:
+      - *restore_git_cache
+      - checkout
+      - *restore_npm_cache
+      - *restore_build_cache
+      - run: |
+          git config --global user.email $(git log --pretty=format:"%ae" -n1)
+          git config --global user.name $(git log --pretty=format:"%an" -n1)
+      - run: npm run deploy -- -e $CIRCLE_BRANCH
+      
+workflows:
+  version: 2
+  build-test-deploy:
+    jobs:
+      - setup
+      - lint:
+          requires:
+            - setup
+      - unit:
+          requires:
+            - setup
+      - build:
+          requires:
+            - setup
+      - integration:
+          requires:
+            - build
+      - store_build:
+          requires:
+            - build
+      - store_dist:
+          requires:
+            - build
+      # Disable deployment while running in parallel with Travis
+      # - deploy-npm:
+      #     requires:
+      #       - lint
+      #       - unit
+      #       - integration
+      #       - build
+      #     filters:
+      #       branches:
+      #         only:
+      #           - master
+      #           - develop
+      #           - /^hotfix\/.*/
+      # - deploy-gh-pages:
+      #     requires:
+      #       - lint
+      #       - unit
+      #       - integration
+      #       - build
@@ -12,6 +12,7 @@
 *.svg binary

 # Prefer LF for most file types
+*.css text eol=lf
 *.frag text eol=lf
 *.htm text eol=lf
 *.html text eol=lf
@@ -1,11 +1,64 @@
 ## Contributing
 The development of Scratch is an ongoing process, and we love to have people in the Scratch and open source communities help us along the way.

-If you're interested in contributing, please take a look at the [issues](https://github.com/LLK/scratch-gui/issues) on this repository.
-Two great ways of helping are by identifying bugs and documenting them as issues, or fixing issues and creating pull requests. When looking for bugs to fix, please look for the ["Help Wanted" label](https://github.com/LLK/scratch-gui/issues?q=label%3A%22help+wanted%22). Bugs with this label have been specifically set aside for Open Source contributors. Issues without the label can also be worked on but we ask that you comment on the issue prior to starting work. When submitting pull requests please be patient -- it can take a while to find time to review them. The organization and class structures can't be radically changed without significant coordination and collaboration from the Scratch Team, so these types of changes should be avoided.
+### Ways to Help

-It's been said that the Scratch Team spends about one hour of design discussion for every pixel in Scratch, but some think that estimate is a little low. While we welcome suggestions for new features in our [suggestions forum](https://scratch.mit.edu/discuss/1/) (especially ones that come with mockups), we are unlikely to accept PRs with new features that haven't been thought through and discussed as a group. Why? Because we have a strong belief in the value of keeping things simple for new users. To learn more about our design philosophy, see [the Scratch Developers page](https://scratch.mit.edu/developers), or [this paper](http://web.media.mit.edu/~mres/papers/Scratch-CACM-final.pdf).
+* **Documenting bugs**
+  * If you've identified a bug in Scratch you should first check to see if it's been filed as an issue, if not you can file one.  Make sure you follow the issue template.
+  * It's important that we can consistently reproduce issues. When writing an issue, be sure to follow our [reproduction step guidelines](https://github.com/LLK/scratch-gui/wiki/Writing-good-repro-steps).
+    * Some issues are marked "Needs Repro". Adding a comment with good reproduction steps to those issues is a great way to help.
+  * If you don't have an issue in mind already, you can look through the [Bugs & Glitches forum.](https://scratch.mit.edu/discuss/3/) Look for users reporting problems, reproduce the problem yourself, and file new issues following our guidelines. 

+* **Fixing bugs**
+  * You can request to fix a bug in a comment on the issue if you at mention the repo coordinator, who for this repo is @chrisgarrity.
+    * If the issue is marked "Help Wanted" you can go ahead and start working on it!
+  * **We will only accept Pull Requests for bugs that have an issue filed that has a priority label** 
+    * If you're interested in fixing a bug with no issue, file the issue first and wait for it to have a priority added to it.
+  
+  * We are not looking for Pull Requests ("PR") for every issue and may deny a PR if it doesn't fit our criteria.
+    * We are far more likely to accept a PR if it is for an issue marked with Help Wanted.
+    * We will not accept PRs for issues marked with "Needs Discussion" or "Needs Design."
+    * Wait until the Repo Coordinator assigns the issue to you before you begin work or submit a PR.
+
+### Learning Git and Github
+
+If you want to work on fixing issues, you should be familiar with Git and Github.
+
+* [Learn Git branching](https://learngitbranching.js.org/) includes an introduction to basic git commands and useful branching features.
+* Here's a general introduction to [contributing to an open source project](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
+
+**Important:** we follow the [Github Flow process](https://guides.github.com/introduction/flow/) as our development process.
+
+### How to Fix Bugs
+1. Identify which Github issue you are working on. Leave a comment on the issue to let us (and other contributors) know you're working on it.
+2. Make sure you have a fork of this repo (see [Github's forking a repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) for details)
+3. Switch to the `develop` branch, and pull down the latest changes from upstream
+4. Run the code, and reproduce the problem
+5. Create your branch from the `develop` branch
+6. Make code changes to fix the problem
+7. Run `npm test` to make sure that your changes pass our tests
+8. Commit your changes
+9. Push your branch to your fork
+10. Create your pull request
+    1. Make sure to follow the template in the PR description
+    1. Remember to check the “[Allow edits from maintainers](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/allowing-changes-to-a-pull-request-branch-created-from-a-fork)” box
+
+When submitting pull requests keep in mind:
+* please be patient -- it can take a while to find time to review them
+* try to change the least amount of code necessary to fix the bug
+* the code can't be radically changed without significant coordination with the Scratch Team, so these types of changes should be avoided
+* if you find yourself changing a substantial amount of code or considering radical changes, please ask for clarification -- we may have envisioned a different approach, or underestimated the amount of effort
+
+### Suggestions
+![Block sketch](https://user-images.githubusercontent.com/3431616/77192550-1dcebe00-6ab3-11ea-9606-8ecd8500c958.png)
+
+Please note: **_we are unlikely to accept PRs with new features that haven't been thought through and discussed as a group_**.
+
+Why? Because we have a strong belief in the value of keeping things simple for new users. It's been said that the Scratch Team spends about one hour of design discussion for every pixel in Scratch. To learn more about our design philosophy, see [the Scratch Developers page](https://scratch.mit.edu/developers), or [this paper](http://web.media.mit.edu/~mres/papers/Scratch-CACM-final.pdf).
+
+We welcome suggestions! If you want to suggest a feature, please post in our [suggestions forum](https://scratch.mit.edu/discuss/1/). Your suggestion will be helped if you include a mockup design; this can be simple, even hand-drawn.
+
+### Other resources
 Beyond this repo, there are also some other resources that you might want to take a look at:
 * [Community Guidelines](https://github.com/LLK/scratch-www/wiki/Community-Guidelines) (we find it important to maintain a constructive and welcoming community, just like on Scratch)
 * [Open Source forum](https://scratch.mit.edu/discuss/49/) on Scratch
@@ -4,7 +4,6 @@
 # NPM
 /node_modules
 npm-*
-/package-lock.json

 # Testing
 /.nyc_output
@@ -15,6 +14,6 @@ npm-*
 /dist
 /.opt-in

-# generated translation files
+# Generated translation files
 /translations
 /locale
@@ -5,6 +5,9 @@
 /node_modules
 npm-*

+# Double copies of all the static assets and tutorial gifs
+/src
+
 # Testing
 /.nyc_output
 /coverage
@@ -1,14 +1,15 @@
 language: node_js
 sudo: required
-dist: trusty
+dist: xenial
 addons:
    chrome: stable
 node_js:
- 8
+- 10
 env:
  global:
+  - CHROMEDRIVER_VERSION=LATEST
  - NODE_ENV=production
-  - SMOKE_URL=https://llk.github.io/scratch-gui/$TRAVIS_PULL_REQUEST_BRANCH
+  - NODE_OPTIONS=--max-old-space-size=7250
  - NPM_TAG=latest
  - RELEASE_VERSION="0.1.0-prerelease.$(date +'%Y%m%d%H%M%S')"
 cache:
@@ -16,15 +17,14 @@ cache:
  - node_modules
 install:
 - npm --production=false install
- npm --production=false update
 script:
 - npm test
- if [ "$TRAVIS_EVENT_TYPE" == "pull_request" ] && [ "$TRAVIS_BRANCH" == "master" ]; then  npm run test:smoke; fi
 before_deploy:
 - >
  if [ -z "$BEFORE_DEPLOY_RAN" ]; then
    npm --no-git-tag-version version $RELEASE_VERSION
    if [ "$TRAVIS_BRANCH" == "master" ]; then export NPM_TAG=stable; fi
+    if [[ "$TRAVIS_BRANCH" == hotfix/* ]]; then export NPM_TAG=hotfix; fi # double brackets are important for matching the wildcard
    git config --global user.email $(git log --pretty=format:"%ae" -n1)
    git config --global user.name $(git log --pretty=format:"%an" -n1)
    export BEFORE_DEPLOY_RAN=true
@@ -35,7 +35,7 @@ deploy:
    branch:
    - master
    - develop
-    - smoke
+    - hotfix/*
    condition: $TRAVIS_EVENT_TYPE != cron
  skip_cleanup: true
  email: $NPM_EMAIL
@@ -47,25 +47,15 @@ deploy:
    - master
    - develop
    - smoke
+    - hotfix/*
    condition: $TRAVIS_EVENT_TYPE != cron
  skip_cleanup: true
  script: if npm info scratch-gui | grep -q $RELEASE_VERSION; then git tag $RELEASE_VERSION && git push https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git $RELEASE_VERSION; fi
- provider: s3
-  on:
-    branch:
-    - master
-    - $PREVIEW_BRANCH
-    condition: $TRAVIS_EVENT_TYPE != cron
-  access_key_id: $AWS_ACCESS_KEY_ID
-  secret_access_key: $AWS_SECRET_ACCESS_KEY
-  bucket: $AWS_BUCKET_NAME
-  acl: public_read
-  skip_cleanup: true
-  local_dir: build
 - provider: script
  on:
    all_branches: true
-    condition: $TRAVIS_EVENT_TYPE != cron
+    condition: $TRAVIS_EVENT_TYPE != cron && ! $TRAVIS_BRANCH =~ ^dependabot/
+    tags: false # Don't push tags to gh-pages
  skip_cleanup: true
  script: npm run deploy -- -x -e $TRAVIS_BRANCH -r https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
 - provider: script
@@ -74,5 +64,3 @@ deploy:
    condition: $TRAVIS_EVENT_TYPE == cron
  skip_cleanup: true
  script: npm run i18n:src && npm run i18n:push
-after_deploy:
- 'curl -X POST -H "Fastly-Key: $FASTLY_TOKEN" -H "Accept: application/json" https://api.fastly.com/service/$FASTLY_SERVICE_ID/purge_all'
@@ -18,6 +18,8 @@ cd scratch-gui
 npm install
 ```

+**You may want to add `--depth=1` to the `git clone` command because there are some [large files in the git repository history](https://github.com/LLK/scratch-gui/issues/5140).**
+
 ## Getting started
 Running the project requires Node.js to be installed.

@@ -30,29 +32,38 @@ Then go to [http://localhost:8601/](http://localhost:8601/) - the playground out

 ## Developing alongside other Scratch repositories

-### Linking this code to another project's `node_modules/scratch-gui`
+### Getting another repo to point to this code
+
+
+If you wish to develop `scratch-gui` alongside other scratch repositories that depend on it, you may wish
+to have the other repositories use your local `scratch-gui` build instead of fetching the current production
+version of the scratch-gui that is found by default using `npm install`.
+
+Here's how to link your local `scratch-gui` code to another project's `node_modules/scratch-gui`.

 #### Configuration

-If you wish to develop scratch-gui alongside other scratch repositories that depend on it, you may wish
-to have the other repositories use your local scratch-gui build instead of fetching the current production
-version of the scratch-gui that is found by default using `npm install`.
+1. In your local `scratch-gui` repository's top level:
+    1. Make sure you have run `npm install`
+    2. Build the `dist` directory by running `BUILD_MODE=dist npm run build`
+    3. Establish a link to this repository by running `npm link`

-To do this:
-1. Make sure you have run `npm install` from this (scratch-gui) repository's top level
-2. Make sure you have run `npm install` from the top level of each repository (such as scratch-www) that depends on scratch-gui
-3. From this (scratch-gui) repository's top level, build the `dist` directory by running `BUILD_MODE=dist npm run build`
-4. From this (scratch-gui) repository's top level, establish a link to this repository by running `npm link`
-5. From the top level of each repository that depends on scratch-gui, run `npm link scratch-gui`
-6. Build or run the repositories that depend on scratch-gui
+2. From the top level of each repository (such as `scratch-www`) that depends on `scratch-gui`:
+    1. Make sure you have run `npm install`
+    2. Run `npm link scratch-gui`
+    3. Build or run the repositoriy

-Instead of `BUILD_MODE=dist npm run build` you can also use `BUILD_MODE=dist npm run watch`, however this may be unreliable.
+#### Using `npm run watch`
+
+Instead of `BUILD_MODE=dist npm run build`, you can use `BUILD_MODE=dist npm run watch` instead. This will watch for changes to your `scratch-gui` code, and automatically rebuild when there are changes. Sometimes this has been unreliable; if you are having problems, try going back to `BUILD_MODE=dist npm run build` until you resolve them.

 #### Oh no! It didn't work!
-* Follow the recipe above step by step and don't change the order. It is especially important to run npm first because installing after the linking will reset the linking.
-* Make sure the repositories are siblings on your machine's file tree.
-* If you have multiple Terminal tabs or windows open for the different Scratch repositories, make sure to use the same node version in all of them.
-* In the worst case unlink the repositories by running `npm unlink` in both, and start over.
+
+If you can't get linking to work right, try:
+* Follow the recipe above step by step and don't change the order. It is especially important to run `npm install` _before_ `npm link`, because installing after the linking will reset the linking.
+* Make sure the repositories are siblings on your machine's file tree, like `.../.../MY_SCRATCH_DEV_DIRECTORY/scratch-gui/` and `.../.../MY_SCRATCH_DEV_DIRECTORY/scratch-www/`.
+* Consistent node.js version: If you have multiple Terminal tabs or windows open for the different Scratch repositories, make sure to use the same node version in all of them.
+* If nothing else works, unlink the repositories by running `npm unlink` in both, and start over.

 ## Testing
 ### Documentation
@@ -65,7 +76,7 @@ See [jest cli docs](https://facebook.github.io/jest/docs/en/cli.html#content) fo

 *NOTE: If you're a windows user, please run these scripts in Windows `cmd.exe`  instead of Git Bash/MINGW64.*

-Before running any test, make sure you have run `npm install` from this (scratch-gui) repository's top level.
+Before running any tests, make sure you have run `npm install` from this (scratch-gui) repository's top level.

 #### Main testing command

@@ -121,9 +132,124 @@ If you want to watch the browser as it runs the test, rather than running headle
 USE_HEADLESS=no $(npm bin)/jest --runInBand test/integration/backpack.test.js
 ```

+## Troubleshooting
+
+### Ignoring optional dependencies
+
+When running `npm install`, you can get warnings about optionsl dependencies:
+
+```
+npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
+npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.2.7
+```
+
+You can suppress them by adding the `no-optional` switch:
+
+```
+npm install --no-optional
+```
+
+Further reading: [Stack Overflow](https://stackoverflow.com/questions/36725181/not-compatible-with-your-operating-system-or-architecture-fsevents1-0-11)
+
+### Resolving dependencies
+
+When installing for the first time, you can get warnings which need to be resolved:
+
+```
+npm WARN eslint-config-scratch@5.0.0 requires a peer of babel-eslint@^8.0.1 but none was installed.
+npm WARN eslint-config-scratch@5.0.0 requires a peer of eslint@^4.0 but none was installed.
+npm WARN scratch-paint@0.2.0-prerelease.20190318170811 requires a peer of react-intl-redux@^0.7 but none was installed.
+npm WARN scratch-paint@0.2.0-prerelease.20190318170811 requires a peer of react-responsive@^4 but none was installed.
+```
+
+You can check which versions are available:
+
+```
+npm view react-intl-redux@0.* version
+```
+
+You will neet do install the required version:
+
+```
+npm install  --no-optional --save-dev react-intl-redux@^0.7
+```
+
+The dependency itself might have more missing dependencies, which will show up like this:
+
+```
+user@machine:~/sources/scratch/scratch-gui (491-translatable-library-objects)$ npm install  --no-optional --save-dev react-intl-redux@^0.7
+scratch-gui@0.1.0 /media/cuideigin/Linux/sources/scratch/scratch-gui
+├── react-intl-redux@0.7.0
+└── UNMET PEER DEPENDENCY react-responsive@5.0.0
+```
+
+You will need to install those as well:
+
+```
+npm install  --no-optional --save-dev react-responsive@^5.0.0
+```
+
+Further reading: [Stack Overflow](https://stackoverflow.com/questions/46602286/npm-requires-a-peer-of-but-all-peers-are-in-package-json-and-node-modules)
+
+
 ## Publishing to GitHub Pages
 You can publish the GUI to github.io so that others on the Internet can view it.
 [Read the wiki for a step-by-step guide.](https://github.com/LLK/scratch-gui/wiki/Publishing-to-GitHub-Pages)

+## Understanding the project state machine
+
+Since so much code throughout scratch-gui depends on the state of the project, which goes through many different phases of loading, displaying and saving, we created a "finite state machine" to make it clear which state it is in at any moment. This is contained in the file src/reducers/project-state.js .
+
+It can be hard to understand the code in src/reducers/project-state.js . There are several types of data and functions used, which relate to each other:
+
+### Loading states
+
+These include state constant strings like:
+
+* `NOT_LOADED` (the default state),
+* `ERROR`,
+* `FETCHING_WITH_ID`,
+* `LOADING_VM_WITH_ID`,
+* `REMIXING`,
+* `SHOWING_WITH_ID`,
+* `SHOWING_WITHOUT_ID`,
+* etc.
+
+### Transitions
+
+These are names for the action which causes a state change. Some examples are:
+
+* `START_FETCHING_NEW`,
+* `DONE_FETCHING_WITH_ID`,
+* `DONE_LOADING_VM_WITH_ID`,
+* `SET_PROJECT_ID`,
+* `START_AUTO_UPDATING`,
+
+### How transitions relate to loading states
+
+As this diagram of the project state machine shows, various transition actions can move us from one loading state to another:
+
+![Project state diagram](docs/project_state_diagram.svg)
+
+_Note: for clarity, the diagram above excludes states and transitions relating to error handling._
+
+#### Example
+
+Here's an example of how states transition.
+
+Suppose a user clicks on a project, and the page starts to load with url https://scratch.mit.edu/projects/123456 .
+
+Here's what will happen in the project state machine:
+
+![Project state example](docs/project_state_example.png)
+
+1. When the app first mounts, the project state is `NOT_LOADED`.
+2. The `SET_PROJECT_ID` redux action is dispatched (from src/lib/project-fetcher-hoc.jsx), with `projectId` set to `123456`. This transitions the state from `NOT_LOADED` to `FETCHING_WITH_ID`.
+3. The `FETCHING_WITH_ID` state. In src/lib/project-fetcher-hoc.jsx, the `projectId` value `123456` is used to request the data for that project from the server.
+4. When the server responds with the data, src/lib/project-fetcher-hoc.jsx dispatches the `DONE_FETCHING_WITH_ID` action, with `projectData` set. This transitions the state from `FETCHING_WITH_ID` to `LOADING_VM_WITH_ID`.
+5. The `LOADING_VM_WITH_ID` state. In src/lib/vm-manager-hoc.jsx, we load the `projectData` into Scratch's virtual machine ("the vm").
+6. When loading is done, src/lib/vm-manager-hoc.jsx dispatches the `DONE_LOADING_VM_WITH_ID` action. This transitions the state from `LOADING_VM_WITH_ID` to `SHOWING_WITH_ID`
+7. The `SHOWING_WITH_ID` state. Now the project appears normally and is playable and editable.
+
 ## Donate
 We provide [Scratch](https://scratch.mit.edu) free of charge, and want to keep it that way! Please consider making a [donation](https://secure.donationpay.org/scratchfoundation/) to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1381px" height="1012px" viewBox="-0.5 -0.5 1381 1012" content="&lt;mxfile host=&quot;www.draw.io&quot; modified=&quot;2020-02-04T16:31:44.889Z&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36&quot; etag=&quot;8a2X5Jj65jOGG04xBBh1&quot; version=&quot;12.6.4&quot; type=&quot;device&quot;&gt;&lt;diagram name=&quot;Page-1&quot; id=&quot;58cdce13-f638-feb5-8d6f-7d28b1aa9fa0&quot;&gt;7V1Zd6O4Ev41OffJHImdRydxujOT7XSSXuYlh9g4YcY2GUw6yfz6KxYBEqtBErjbeYkthMCo9FXVV6XiSDlZv3/y7ZfnS2/hrI5ksHg/Uk6PZBmqEKJ/YctH0gKBFrc8+e4iacsabt3/nKQRJK2v7sLZEh0Dz1sF7gvZOPc2G2ceEG2273tvZLeltyKv+mI/JVcEWcPt3F45hW7f3EXwnP6MXPfPjvv0nFza1JIDj/b8nyffe90k1zuSlWX0Fx9e23ispP/22V54b7kmZXaknPieF8Sf1u8nzip8uPixxeedVRxN79t3NkGbExRTfrTgo6ZB+LgAS2OSjPDTXr06+CdENxp84IeDRkDzgL4cPwfrFWqD6CP6IS/h8W1g+8FtYAfh8aW7Wp14K8+PTlRA9Bd2DnzvHyd3ZLlMjkSPzllkg8ZPJzw099buPPm8sh+d1XH6rPFIG28TXdbbBGf22l2F4vfV8Rf2xk6aE1GDcvK97O7slfu0QW1z9AwddPB44fpIyFwvbNx6r+EUHhcfNH5yjh8477mm5MF/cry1E/gfqEtyVMeLIlklE6gnUvGWyZySND3npA232YmUP6VDZzONPiSTXT7x/z3CCw98/uv8z5/G2fftuxxsLieqWZzsBVoYyVfPD569J29jr2ZZ6/H81f+ZzljW5cLzXpLGv50g+EievP0aeKTkOO9u8D2cV0lLvv3IHTl9T6Y8+vKBv2zQz82dFH79kT+WnRZ9w+dVzhqaVn/uVKyJZJqQZD85Qc3jS55e+Mhq5993Vnbg/iSxps9knn9Tzq//Mh+Xp856onvw6uz934lSspL1VZAIPjHL+r+vHj4w2UYTNUUdIHh5zw6iT0/h/9Prq9nDxfX09Pzq08PXy4dv53efH85P8eDoXuPx494FgUKLIyAFoLDewiXkIjCeJgfW7mIRiZrvoJuzH6Ohwul88dxNED037fhIO60GhgyG8R0VlmmqTJLx87ohE5eaZVO5zidAUlVFjQdrPffJcDfhT8zGope+t1xukUzSspLeRCvxqRL4StHBUxu3bV/sTStxgmXiVCtJ8dDk5R59uqWtPFtl11959mIbzrLv/Y1m/9QO7PDRbBBMoSewrhTrqptpkn9Sw709u4Fz+2JH2POGrClqafjzBDdltahPQ4Ge1+vTkWhQBtoyXY4f1PecskwVaF5b6ry0JSzMbbOy7KUfIdDzGlICWGGyVZKEQg9HvHF8Fz2ycCZ7aFG9qEULfQzWGjQ6der79keuQ6I2KkFW0wxC1CBlQxcwGdR0Rx/i63dF51LZM3RG2j2eT7ByN84Er5roaLi8tCJc3s7uHm6+XP8xO7nLQXUGg28uWowpmp4vwivIur0OgS0BxPBxdUXPkVgPjSZBFbxVWRl1xoNpQtJPMJiYEhMKUHUOlkXps1E64CapNQV5GcxwrvQxyEN5C+WAUub4jxVQ0E2E97HXQIJM27m7eUKtentYwT5db1hBLommkvSDzAZVVBKrhKGKJsgaY2VUxWOYxg6kB09TrNyx5WKOFWTG1EmhgbpGDhHfaHJWJjq72nW6SbkQ9XadpdZ152TXyYxguACzd9Mvd3na5uz8YvZwfxO27A1mtkRJTF+wML5kA1DCyQYmddLFmMgWB6CsWvjMpevqOpatWWtZOtAg3WgQjQKlSRqTGowHMfbFnhcbNTCKSraKaB1JxICX7okiBmezu5PPoe6hWN7MdEd4VyBi90oxsYwpGE2KSVGxrZAiQT/NxFfzGA2yxTKkUCVqYgIKTyViDJa+tw5HdJAX4B9iCiNRpnRMQbMGVqVQeEyhk/ZUCO0pAWjs5P2Gh9g4sjhfqNGTxR25u7IK6S0otF1f4cp2gNhSFW7ygdnWiQDX93ddALffjZCGQ0oR5vjB1jfidlUFZtmNIRNi4wVJD3SXQUj4kTf67PhOOKnbzf/C6yBjwdlubSQDWrUrlTYX7nYPeVD2phOsB31kO2mqbpJOPWDi1dNxGgnIVv5PhIuPfwpzKz630q9m3x5OZ2fT+4u7/mu6Z1ZGu3V9sKDE0BFCszJkW3mcyxqw50ugQ2MxsTpYT7l5rX/6zmYxDVOLw5FenE3ckjx3s3a6W84bnp+VswzqZqfeImrBOuhDsQ6lcK13mLTxhoPrQr21k8LeQu3FBbEKB9dzQZVKpJoLOpg4eM3UWjgQ9qSDsEvMwWapWyNCPJdU/koMGaEk0cJZ2q+roCXreTBuhjVuBqeHtC700C+3P6MuVWEAIqhf7Kwp1Z4fOVOlbMv4k71Vus25AiwzNTUyIiP308BpqgBJK1ADMNHI5eHAIXeDwRzWAMmoz3QvXdI9cIQdLYxza4FMnsIoowlCi/K/k9Spqpymwgl452rhhPLjvbOeyiXNEoSCd9cPt9Ovsz0DsY6eQ82irgMxS4MWISITyAbIdIlKeoKKKOdCrZSvfo5EYz6dAFeCySAU3xq6JhTlKu3slrCNpVylgRSSE/Yekxt2w/vfOFF8HURyJCB8cnCturlWpj4gb1zuGHThIflYO2239RGeVeZoMfetzJa+lczatepkE6kGKVpqw/Y9ur9p8Td4qvXRXm22QVAhowcA4uTyPKu2944j04B0I11r6NhZxHkjChOTS5MlqsaIbIiyubQu+/x+D7KqNaCOq6IIbEri7Lc55f7mdHoX4sfx7Oz6y+zh5Mss/n5yffPjN4aPeCFVwgeSWquUIerJWfDgmcqDWYOy2oTlBRWlHVRACQCTtL+Sc2sAo2wDX/dkyF7Igl38sSALK4OoHFkup1f304sUYPYGS7I9wnJ6gucvHD/X+Sz64wI8emMiHTAU0m7BPkBfzlshRwWSZYL8nyoMnIa1YgAgXUNdV9vaMqZMARQAewRQeMCxAFR1nK4fgxgD1PT+7roMnkj6cGzwJB6Q6i2hsNCabJDQwahWClQhWlC5VF4yf1hXJCis0oHepdQBO0gKK8VkkBQqgYg9bGM07UZYda530M8yYl6Dqh/wVJdxZAE8X2aX598PmNO42uq8L6iRkMOm0qMmqSTGTFS00oRhTJdN3b0xJjNeZDZMTLOZwdwPKp9NhdppqKpUHCPGr94JAfR1tAbyWzNr+/Nhv3E8WTSPlOOlR+/6cQCyxi3lumlSLLTOBMp0XbLIyL/Ox1wqlbYucT1moTy5ZSyPMo2MJtuIgNpSCGNmJZVv5Rce1VNIoFKs+kQnuj9MKAOuwMaNH2dZdPPXhr5qCKh1Gy1QWvK1fzU8HvW6y5UqKMykSK/QVOUc8IX0eEuiikI+ubtXyAsA+eWJ7mzdaWQ0VwP11h1M5bjrCeiSAuxBXpvNfqGidyzhEDaXHFYBmQPKiEfT0AKnCoRaEhCWBtpUHaNrwaHbz9ffyusNHZIHBZTtUbATO9zGrC7Kt4e+jVjXPA2LlqzSkoUFkmVRBXySc2u0biaqlTGhneha3nyLphiSSiKNKsuSBXMMPrW1tYKBKSphw5TMXDRS2e0yjHZ+aJR/o8pK7V039Oe0r4NXLZJoX0cZr1O3qW1vMxKFc95ac1lcgHc0Mao+iIkhUaZA044jlvUIKwhIAXtDts6mfFtHtKkDVyM8KV6dLGIYP8zDtvRxmD/0tvThzR+1S+GdvuYPnRhj1Js/JdYJadRUzkwjZyCquKCB43+pDqcmlJFtUXUdvrYCr53wMQmwl0Eg4Yo/XsiVyEPVt4Ogp9LHm8Go/aZAMpR82TwML/ytAmPYbD/iZSCgHs8yd84gYuUpn8p810LrYqsqazjsV2KDb27xL8EuNpcjZ/jmIRz6ZeQ54CAzRViaHDCjXHENsnG0R05dcdtDQ5S6dDmzwxA+AeailqFSXRSDsp4YpeAYNDvZEKku9K+qyJFy6P36i9jfKh8i4eMM/cjNW1Flk0xnZAPPikZX/5hwKf9R/ir0YeumQbmDXbdrRhDnuHhr409mAd67Ym4B2xsw0TD69ReSTYS3VnFK/S7brj/69G/2iKjUk21o9aoGm+A3lVqhwBQR+Tu2LKrCN4a+Cy9/ONC/AkrnDE//6uMpndNQKDDHmuS2a7fZYsB4GyQseTtcXcrKSHYjydVcCoN3yTRuRsqs/a7XYXO3VbHl0atP8bunGv0NXQEUH6SxcTiIQXmwQbULu88KKVW0OywOsmXh/mxzVX61BXcMQlfEl1Fz9EtG9uN2D5TTP+RgFjExi7IX4WIGePCSgro8pF2EX8uX2kZKhxB5DwtH0M5KOhlUbVlqmRnVWb1Bm0GO296VrBFvYVQQTpmFAS2TTNHsyWgKMCKqs9P6GRFxIaQGE6IfIVAQWcZvhmtnTRxeDzdOpTwCskIdUCkDyQL5WECYyAa6lfs1x1BurnWdhZHRGNXMOgedvYcZ5xzUdMWGyVzgUaNSOLDQ9CUCoCQT42qSQtSSE1ZUJcVP1mo9LB92UOoLine truncated
@@ -4,9 +4,9 @@
  "description": "GraphicaL User Interface for creating and running Scratch 3.0 projects",
  "main": "./dist/scratch-gui.js",
  "scripts": {
-    "build": "npm run clean && webpack --progress --colors --bail",
+    "build": "npm run clean && webpack --colors --bail",
    "clean": "rimraf ./build && mkdirp build && rimraf ./dist && mkdirp dist",
-    "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
+    "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1) [skip ci]\"",
    "prune": "./prune-gh-pages.sh",
    "i18n:push": "tx-push-src scratch-editor interface translations/en.json",
    "i18n:src": "rimraf ./translations/messages/src && babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/src ./translations/ && npm run i18n:push",
@@ -16,7 +16,7 @@
    "test:lint": "eslint . --ext .js,.jsx",
    "test:unit": "jest test[\\\\/]unit",
    "test:smoke": "jest --runInBand test[\\\\/]smoke",
-    "watch": "webpack --progress --colors --watch"
+    "watch": "webpack --colors --watch"
  },
  "author": "Massachusetts Institute of Technology",
  "license": "BSD-3-Clause",
@@ -44,7 +44,7 @@
    "babel-loader": "^8.0.4",
    "base64-loader": "1.0.0",
    "bowser": "1.9.4",
-    "chromedriver": "2.44.1",
+    "chromedriver": "83.0.0",
    "classnames": "2.2.6",
    "computed-style-to-inline-style": "3.0.0",
    "copy-webpack-plugin": "^4.5.1",
@@ -55,8 +55,10 @@
    "es6-object-assign": "1.1.0",
    "eslint": "^5.0.1",
    "eslint-config-scratch": "^5.0.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-react": "7.11.1",
+    "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",
    "get-user-media-promise": "1.1.4",
@@ -65,6 +67,7 @@
    "immutable": "3.8.2",
    "intl": "1.2.5",
    "jest": "^21.0.0",
+    "jest-junit": "^7.0.0",
    "js-base64": "2.4.9",
    "keymirror": "0.1.1",
    "lodash.bindall": "4.4.0",
@@ -75,9 +78,9 @@
    "lodash.pick": "4.4.0",
    "lodash.throttle": "4.0.1",
    "minilog": "3.1.0",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "^1.0.3",
    "omggif": "1.0.9",
-    "papaparse": "4.6.2",
+    "papaparse": "5.1.1",
    "postcss-import": "^12.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-simple-vars": "^5.0.1",
@@ -90,8 +93,8 @@
    "react-dom": "16.2.0",
    "react-draggable": "3.0.5",
    "react-ga": "2.5.3",
-    "react-intl": "2.4.0",
-    "react-modal": "3.6.1",
+    "react-intl": "2.9.0",
+    "react-modal": "3.9.1",
    "react-popover": "0.5.10",
    "react-redux": "5.0.7",
    "react-responsive": "5.0.0",
@@ -104,14 +107,14 @@
    "redux-mock-store": "^1.2.3",
    "redux-throttle": "0.1.1",
    "rimraf": "^2.6.1",
-    "scratch-audio": "0.1.0-prerelease.20190114210212",
-    "scratch-blocks": "0.1.0-prerelease.1549990124",
-    "scratch-l10n": "3.1.20190220143732",
-    "scratch-paint": "0.2.0-prerelease.20190114205252",
-    "scratch-render": "0.1.0-prerelease.20190213183713",
-    "scratch-storage": "1.2.2",
-    "scratch-svg-renderer": "0.2.0-prerelease.20190125192231",
-    "scratch-vm": "0.2.0-prerelease.20190304203619",
+    "scratch-audio": "0.1.0-prerelease.20200528195344",
+    "scratch-blocks": "0.1.0-prerelease.20200709183415",
+    "scratch-l10n": "3.10.20200708030815",
+    "scratch-paint": "0.2.0-prerelease.20200627020736",
+    "scratch-render": "0.1.0-prerelease.20200622210757",
+    "scratch-storage": "1.3.3",
+    "scratch-svg-renderer": "0.2.0-prerelease.20200610220938",
+    "scratch-vm": "0.2.0-prerelease.20200709173451",
    "selenium-webdriver": "3.6.0",
    "startaudiocontext": "1.2.1",
    "style-loader": "^0.23.0",
@@ -136,7 +139,8 @@
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
+      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
+      "editor-msgs(\\.js)?$": "<rootDir>/test/__mocks__/editor-msgs-mock.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')
+            }
        }
    }
 };
@@ -15,6 +15,7 @@
    padding-right: 1rem;
    margin-bottom: 7px;
    min-height: 1.5rem;
+    pointer-events: all;
 }

 .alert.warn {
@@ -5,7 +5,7 @@
    color: $ui-white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
-    justify-content: end;
+    justify-content: flex-end;
    align-items: center;
    font-size: .8125rem;
 }
@@ -24,7 +24,7 @@
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
-    overflow-y: auto;
+    overflow: visible;
 }

 [dir="ltr"] .detail-area {
@@ -50,8 +50,16 @@ $fade-out-distance: 100px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
+}
+
+.list-area:after {
    /* Make sure there is room to scroll beyond the last tile */
-    padding-bottom: 70px;
+    content: '';
+    display: block;
+    height: 70px;
+    width: 100%;
+    flex-shrink: 0;
+    order: 99999999;
 }

 .list-item {
@@ -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;
@@ -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);
 }
@@ -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>
@@ -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>
@@ -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;
@@ -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;
@@ -2,10 +2,18 @@
@import "../../css/colors.css";
@import "../../css/z-index.css";

+.card-container-overlay {
+    position: fixed;
+    pointer-events: none;
+    z-index: $z-index-card;
+}
+
 .card-container {
    position:absolute;
+    pointer-events: auto;
    z-index: $z-index-card;
    margin: 0.5rem 2rem;
+    min-width: 468px;
 }

 .left-card, .right-card {
@@ -104,11 +112,38 @@
    font-weight: bold;
 }

+.header-buttons-hidden {
+    border-bottom: 0px;
+}
+
+.header-buttons-right {
+    display: flex;
+    flex-direction: row;
+}
+
+.header-buttons img {
+    margin-bottom: 2px;
+}
+
+.shrink-expand-button {
+    cursor: pointer;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0.75rem;
+}
+
+.shrink-expand-button:hover, .all-button:hover {
+    background-color: $ui-black-transparent;
+}
+
 .remove-button, .all-button {
    cursor: pointer;
    color: white;
    display: flex;
-    flex-direction: row;
+    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
@@ -127,6 +162,7 @@
 }

 .step-body {
+    width: 100%;
    background: $ui-white;
    display: flex;
    flex-direction: column;
@@ -134,14 +170,19 @@
    align-items: center;
    position: relative;
    text-align: center;
+
+    /* Min height prevents layout changing when images change */
+    min-height: 256px;
 }

 .step-video {
-    height: 337px;
+    height: 256px;
 }

 .step-image {
    max-width: 450px;
+    max-height: 200px;
+    object-fit: contain;
    background: #F9F9F9;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
@@ -188,7 +229,7 @@
 }

 .close-icon {
-    height: 1rem;
+    height: 1.25rem;
    margin: .125rem 0; /* To offset the .25rem difference in icon size */
 }

@@ -240,14 +281,6 @@
    margin-right: 0.5rem;
 }

-.video-cover {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
 .steps-list {
    display: flex;
    flex-direction: row;
@@ -267,3 +300,7 @@
    background: $ui-white;
    box-shadow: 0px 0px 0px 2px $ui-black-transparent;
 }
+
+.hidden {
+    display: none;
+}
@@ -1,10 +1,14 @@
 import PropTypes from 'prop-types';
 import React, {Fragment} from 'react';
+import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 import Draggable from 'react-draggable';

 import styles from './card.css';

+import shrinkIcon from './icon--shrink.svg';
+import expandIcon from './icon--expand.svg';
+
 import rightArrow from './icon--next.svg';
 import leftArrow from './icon--prev.svg';

@@ -14,8 +18,8 @@ import closeIcon from './icon--close.svg';
 import {translateVideo} from '../../lib/libraries/decks/translate-video.js';
 import {translateImage} from '../../lib/libraries/decks/translate-image.js';

-const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
-    <div className={styles.headerButtons}>
+const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, step, expanded}) => (
+    <div className={expanded ? styles.headerButtons : classNames(styles.headerButtons, styles.headerButtonsHidden)}>
        <div
            className={styles.allButton}
            onClick={onShowAll}
@@ -41,49 +45,107 @@ const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
                    ))}
            </div>
        ) : null}
-        <div
-            className={styles.removeButton}
-            onClick={onCloseCards}
-        >
-            <FormattedMessage
-                defaultMessage="Close"
-                description="Title for button to close how-to card"
-                id="gui.cards.close"
-            />
-            <img
-                className={styles.closeIcon}
-                src={closeIcon}
-            />
+        <div className={styles.headerButtonsRight}>
+            <div
+                className={styles.shrinkExpandButton}
+                onClick={onShrinkExpandCards}
+            >
+                <img
+                    draggable={false}
+                    src={expanded ? shrinkIcon : expandIcon}
+                />
+                {expanded ?
+                    <FormattedMessage
+                        defaultMessage="Shrink"
+                        description="Title for button to shrink how-to card"
+                        id="gui.cards.shrink"
+                    /> :
+                    <FormattedMessage
+                        defaultMessage="Expand"
+                        description="Title for button to expand how-to card"
+                        id="gui.cards.expand"
+                    />
+                }
+            </div>
+            <div
+                className={styles.removeButton}
+                onClick={onCloseCards}
+            >
+                <img
+                    className={styles.closeIcon}
+                    src={closeIcon}
+                />
+                <FormattedMessage
+                    defaultMessage="Close"
+                    description="Title for button to close how-to card"
+                    id="gui.cards.close"
+                />
+            </div>
        </div>
    </div>
 );

-// Video step needs to know if the card is being dragged to cover the video
-// so that the mouseup is not swallowed by the iframe.
-const VideoStep = ({video, dragging}) => (
-    <div className={styles.stepVideo}>
-        {dragging ? (
-            <div className={styles.videoCover} />
-        ) : null}
-        <iframe
-            allowFullScreen
-            allowTransparency="true"
-            frameBorder="0"
-            height="338"
-            scrolling="no"
-            src={`https://fast.wistia.net/embed/iframe/${video}?seo=false&videoFoam=true`}
-            title="📹"
-            width="600"
-        />
-        <script
-            async
-            src="https://fast.wistia.net/assets/external/E-v1.js"
-        />
-    </div>
-);
+class VideoStep extends React.Component {
+
+    componentDidMount () {
+        const script = document.createElement('script');
+        script.src = `https://fast.wistia.com/embed/medias/${this.props.video}.jsonp`;
+        script.async = true;
+        script.setAttribute('id', 'wistia-video-content');
+        document.body.appendChild(script);
+
+        const script2 = document.createElement('script');
+        script2.src = 'https://fast.wistia.com/assets/external/E-v1.js';
+        script2.async = true;
+        script2.setAttribute('id', 'wistia-video-api');
+        document.body.appendChild(script2);
+    }
+
+    // We use the Wistia API here to update or pause the video dynamically:
+    // https://wistia.com/support/developers/player-api
+    componentDidUpdate (prevProps) {
+        // Ensure the wistia API is loaded and available
+        if (!(window.Wistia && window.Wistia.api)) return;
+
+        // Get a handle on the currently loaded video
+        const video = window.Wistia.api(prevProps.video);
+
+        // Reset the video source if a new video has been chosen from the library
+        if (prevProps.video !== this.props.video) {
+            video.replaceWith(this.props.video);
+        }
+
+        // Pause the video if the modal is being shrunken
+        if (!this.props.expanded) {
+            video.pause();
+        }
+    }
+
+    componentWillUnmount () {
+        const script = document.getElementById('wistia-video-content');
+        script.parentNode.removeChild(script);
+
+        const script2 = document.getElementById('wistia-video-api');
+        script2.parentNode.removeChild(script2);
+    }
+
+    render () {
+        return (
+            <div className={styles.stepVideo}>
+                <div
+                    className={`wistia_embed wistia_async_${this.props.video}`}
+                    id="video-div"
+                    style={{height: `257px`, width: `466px`}}
+                >
+                    &nbsp;
+                </div>
+            </div>
+        );
+    }
+}

 VideoStep.propTypes = {
-    dragging: PropTypes.bool.isRequired,
+    expanded: PropTypes.bool.isRequired,
    video: PropTypes.string.isRequired
 };

@@ -96,6 +158,7 @@ const ImageStep = ({title, image}) => (
            <img
                className={styles.stepImage}
                draggable={false}
+                key={image} /* Use src as key to prevent hanging around on slow connections */
                src={image}
            />
        </div>
@@ -107,13 +170,13 @@ ImageStep.propTypes = {
    title: PropTypes.node.isRequired
 };

-const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
+const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, expanded}) => (
    <Fragment>
        {onNextStep ? (
            <div>
-                <div className={isRtl ? styles.leftCard : styles.rightCard} />
+                <div className={expanded ? (isRtl ? styles.leftCard : styles.rightCard) : styles.hidden} />
                <div
-                    className={isRtl ? styles.leftButton : styles.rightButton}
+                    className={expanded ? (isRtl ? styles.leftButton : styles.rightButton) : styles.hidden}
                    onClick={onNextStep}
                >
                    <img
@@ -125,9 +188,9 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
        ) : null}
        {onPrevStep ? (
            <div>
-                <div className={isRtl ? styles.rightCard : styles.leftCard} />
+                <div className={expanded ? (isRtl ? styles.rightCard : styles.leftCard) : styles.hidden} />
                <div
-                    className={isRtl ? styles.rightButton : styles.leftButton}
+                    className={expanded ? (isRtl ? styles.rightButton : styles.leftButton) : styles.hidden}
                    onClick={onPrevStep}
                >
                    <img
@@ -141,13 +204,16 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
 );

 NextPrevButtons.propTypes = {
+    expanded: PropTypes.bool.isRequired,
    isRtl: PropTypes.bool,
    onNextStep: PropTypes.func,
    onPrevStep: PropTypes.func
 };
 CardHeader.propTypes = {
+    expanded: PropTypes.bool.isRequired,
    onCloseCards: PropTypes.func.isRequired,
    onShowAll: PropTypes.func.isRequired,
+    onShrinkExpandCards: PropTypes.func.isRequired,
    step: PropTypes.number,
    totalSteps: PropTypes.number
 };
@@ -219,78 +285,113 @@ const Cards = props => {
        locale,
        onActivateDeckFactory,
        onCloseCards,
+        onShrinkExpandCards,
        onDrag,
        onStartDrag,
        onEndDrag,
        onShowAll,
        onNextStep,
        onPrevStep,
+        showVideos,
        step,
+        expanded,
        ...posProps
    } = props;
    let {x, y} = posProps;

    if (activeDeckId === null) return;

+    // Tutorial cards need to calculate their own dragging bounds
+    // to allow for dragging the cards off the left, right and bottom
+    // edges of the workspace.
+    const cardHorizontalDragOffset = 400; // ~80% of card width
+    const cardVerticalDragOffset = expanded ? 257 : 0; // ~80% of card height, if expanded
+    const menuBarHeight = 48; // TODO: get pre-calculated from elsewhere?
+    const wideCardWidth = 500;
+
    if (x === 0 && y === 0) {
        // initialize positions
-        x = isRtl ? -292 : 292;
-        // The tallest cards are about 385px high, and the default position is pinned
+        x = isRtl ? (-190 - wideCardWidth - cardHorizontalDragOffset) : 292;
+        x += cardHorizontalDragOffset;
+        // The tallest cards are about 320px high, and the default position is pinned
        // to near the bottom of the blocks palette to allow room to work above.
-        const tallCardHeight = 385;
+        const tallCardHeight = 320;
        const bottomMargin = 60; // To avoid overlapping the backpack region
-        y = window.innerHeight - tallCardHeight - bottomMargin;
+        y = window.innerHeight - tallCardHeight - bottomMargin - menuBarHeight;
    }

    const steps = content[activeDeckId].steps;

    return (
-        <Draggable
-            bounds="parent"
-            position={{x: x, y: y}}
-            onDrag={onDrag}
-            onStart={onStartDrag}
-            onStop={onEndDrag}
+        // Custom overlay to act as the bounding parent for the draggable, using values from above
+        <div
+            className={styles.cardContainerOverlay}
+            style={{
+                width: `${window.innerWidth + (2 * cardHorizontalDragOffset)}px`,
+                height: `${window.innerHeight - menuBarHeight + cardVerticalDragOffset}px`,
+                top: `${menuBarHeight}px`,
+                left: `${-cardHorizontalDragOffset}px`
+            }}
        >
-            <div className={styles.cardContainer}>
-                <div className={styles.card}>
-                    <CardHeader
-                        step={step}
-                        totalSteps={steps.length}
-                        onCloseCards={onCloseCards}
-                        onShowAll={onShowAll}
-                    />
-                    <div className={styles.stepBody}>
-                        {steps[step].deckIds ? (
-                            <PreviewsStep
-                                content={content}
-                                deckIds={steps[step].deckIds}
-                                onActivateDeckFactory={onActivateDeckFactory}
-                                onShowAll={onShowAll}
-                            />
-                        ) : (
-                            steps[step].video ? (
-                                <VideoStep
-                                    dragging={dragging}
-                                    video={translateVideo(steps[step].video, locale)}
+            <Draggable
+                bounds="parent"
+                cancel="#video-div" // disable dragging on video div
+                position={{x: x, y: y}}
+                onDrag={onDrag}
+                onStart={onStartDrag}
+                onStop={onEndDrag}
+            >
+                <div className={styles.cardContainer}>
+                    <div className={styles.card}>
+                        <CardHeader
+                            expanded={expanded}
+                            step={step}
+                            totalSteps={steps.length}
+                            onCloseCards={onCloseCards}
+                            onShowAll={onShowAll}
+                            onShrinkExpandCards={onShrinkExpandCards}
+                        />
+                        <div className={expanded ? styles.stepBody : styles.hidden}>
+                            {steps[step].deckIds ? (
+                                <PreviewsStep
+                                    content={content}
+                                    deckIds={steps[step].deckIds}
+                                    onActivateDeckFactory={onActivateDeckFactory}
+                                    onShowAll={onShowAll}
                                />
                            ) : (
-                                <ImageStep
-                                    image={translateImage(steps[step].image, locale)}
-                                    title={steps[step].title}
-                                />
-                            )
-                        )}
-                        {steps[step].trackingPixel && steps[step].trackingPixel}
+                                steps[step].video ? (
+                                    showVideos ? (
+                                        <VideoStep
+                                            dragging={dragging}
+                                            expanded={expanded}
+                                            video={translateVideo(steps[step].video, locale)}
+                                        />
+                                    ) : ( // Else show the deck image and title
+                                        <ImageStep
+                                            image={content[activeDeckId].img}
+                                            title={content[activeDeckId].name}
+                                        />
+                                    )
+                                ) : (
+                                    <ImageStep
+                                        image={translateImage(steps[step].image, locale)}
+                                        title={steps[step].title}
+                                    />
+                                )
+                            )}
+                            {steps[step].trackingPixel && steps[step].trackingPixel}
+                        </div>
+                        <NextPrevButtons
+                            expanded={expanded}
+                            isRtl={isRtl}
+                            onNextStep={step < steps.length - 1 ? onNextStep : null}
+                            onPrevStep={step > 0 ? onPrevStep : null}
+                        />
                    </div>
-                    <NextPrevButtons
-                        isRtl={isRtl}
-                        onNextStep={step < steps.length - 1 ? onNextStep : null}
-                        onPrevStep={step > 0 ? onPrevStep : null}
-                    />
                </div>
-            </div>
-        </Draggable>
+            </Draggable>
+        </div>
    );
 };

@@ -309,6 +410,7 @@ Cards.propTypes = {
        })
    }),
    dragging: PropTypes.bool.isRequired,
+    expanded: PropTypes.bool.isRequired,
    isRtl: PropTypes.bool.isRequired,
    locale: PropTypes.string.isRequired,
    onActivateDeckFactory: PropTypes.func.isRequired,
@@ -318,10 +420,21 @@ Cards.propTypes = {
    onNextStep: PropTypes.func.isRequired,
    onPrevStep: PropTypes.func.isRequired,
    onShowAll: PropTypes.func,
+    onShrinkExpandCards: PropTypes.func.isRequired,
    onStartDrag: PropTypes.func,
+    showVideos: PropTypes.bool,
    step: PropTypes.number.isRequired,
    x: PropTypes.number,
    y: PropTypes.number
 };

-export default Cards;
+Cards.defaultProps = {
+    showVideos: true
+};
+
+export {
+    Cards as default,
+    // Others exported for testability
+    ImageStep,
+    VideoStep
+};
@@ -1,17 +1,17 @@
 <?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 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
-    <title>General/Check Copy</title>
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Extensions/Connection/Close</title>
    <desc>Created with Sketch.</desc>
    <defs>
-        <path d="M10,7.73577763 L12.2675846,5.46819305 C12.8909754,4.84480221 13.8988379,4.84194841 14.5284447,5.47155526 C15.1536925,6.096803 15.1476685,7.11655392 14.531807,7.73241542 L12.2642224,10 L14.531807,12.2675846 C15.1551978,12.8909754 15.1580516,13.8988379 14.5284447,14.5284447 C13.903197,15.1536925 12.8834461,15.1476685 12.2675846,14.531807 L10,12.2642224 L7.73241542,14.531807 C7.10902458,15.1551978 6.10116212,15.1580516 5.47155526,14.5284447 C4.84630752,13.903197 4.85233155,12.8834461 5.46819305,12.2675846 L7.73577763,10 L5.46819305,7.73241542 C4.84480221,7.10902458 4.84194841,6.10116212 5.47155526,5.47155526 C6.096803,4.84630752 7.11655392,4.85233155 7.73241542,5.46819305 L10,7.73577763 Z" id="path-1"></path>
+        <path d="M15.464935,15.467297 C14.7644059,16.1777705 13.6185877,16.1777705 12.9081142,15.467297 L9.99881899,12.5580018 L7.08841885,15.467297 C6.38236506,16.1733508 5.23765187,16.1733508 4.53159807,15.467297 C4.17912364,15.1148226 4.00012409,14.6485398 4.00012409,14.1888866 C4.00012409,13.7281285 4.17912364,13.2629506 4.53159807,12.9104762 L7.44089328,10.001181 L4.52717833,7.08636112 C4.17359897,6.73278176 3.99459941,6.26760391 4.00012409,5.80242606 C4.00012409,5.34166795 4.17359897,4.88201477 4.52717833,4.52954034 C5.23212719,3.82348655 6.37684038,3.82348655 7.08399911,4.52954034 L9.99881899,7.44325529 L12.9125339,4.52954034 C13.6185877,3.82348655 14.7644059,3.82348655 15.4704597,4.52954034 C16.1765134,5.2344892 16.1765134,6.38030733 15.4704597,7.08636112 L12.5545348,10.001181 L15.4704597,12.914896 C16.1765134,13.6209497 16.1765134,14.7557185 15.464935,15.467297" id="path-1"></path>
    </defs>
-    <g id="General/Check-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Extensions/Connection/Close" 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="close-icon" fill="#FFFFFF" xlink:href="#path-1"></use>
-        <g id="Color/White" mask="url(#mask-2)" fill="#FFFFFF">
+        <use id="close" fill="#FFFFFF" xlink:href="#path-1"></use>
+        <g id="White" mask="url(#mask-2)" fill="#FFFFFF">
            <rect id="Color" x="0" y="0" width="20" height="20"></rect>
        </g>
    </g>
@@ -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 53.2 (72643) - https://sketchapp.com -->
+    <title>Tutorials/Expand</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M4.5,2 L15.5,2 C16.8807119,2 18,3.11928813 18,4.5 L18,5.5 C18,5.77614237 17.7761424,6 17.5,6 L2.5,6 C2.22385763,6 2,5.77614237 2,5.5 L2,4.5 C2,3.11928813 3.11928813,2 4.5,2 Z M2.5,7 L17.5,7 C17.7761424,7 18,7.22385763 18,7.5 L18,15.5 C18,16.8807119 16.8807119,18 15.5,18 L4.5,18 C3.11928813,18 2,16.8807119 2,15.5 L2,7.5 C2,7.22385763 2.22385763,7 2.5,7 Z M9.65509466,15.1636146 C9.745416,15.2533569 9.86700241,15.3031495 9.99727357,15.3031495 C10.1275447,15.3031495 10.2491311,15.2533569 10.3394525,15.1636146 L12.1574588,13.3456082 C12.3004676,13.2025994 12.3415754,12.9993764 12.2657286,12.8158388 C12.1898819,12.6334592 12.0109762,12.5153467 11.8100691,12.5153467 L11.1506075,12.5153467 L10.7899012,9.98808625 C10.7464775,9.64474938 10.4703026,9.36567961 10.1124912,9.30951827 C10.0783312,9.30546539 10.0435922,9.30314946 10.0094322,9.30314946 C9.61282891,9.30314946 9.27586085,9.59785176 9.22548933,9.98519134 L8.8740467,12.5153467 L8.18447804,12.5153467 C7.9858869,12.5153467 7.81450796,12.6265114 7.73692425,12.8065751 C7.65876155,12.9866388 7.69639544,13.1962306 7.83708829,13.3456082 L9.65509466,15.1636146 Z" id="path-1"></path>
+    </defs>
+    <g id="Tutorials/Expand" 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="Combined-Shape" fill-rule="nonzero"></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>
@@ -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 53.2 (72643) - https://sketchapp.com -->
+    <title>Tutorials/Shink</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M2.5,8 C2.22385763,8 2,7.77614237 2,7.5 C2,7.22385763 2.22385763,7 2.5,7 L3.5,7 C3.77614237,7 4,7.22385763 4,7.5 C4,7.77614237 3.77614237,8 3.5,8 L2.5,8 Z M5.5,8 C5.22385763,8 5,7.77614237 5,7.5 C5,7.22385763 5.22385763,7 5.5,7 L6.5,7 C6.77614237,7 7,7.22385763 7,7.5 C7,7.77614237 6.77614237,8 6.5,8 L5.5,8 Z M8.5,8 C8.22385763,8 8,7.77614237 8,7.5 C8,7.22385763 8.22385763,7 8.5,7 L9.5,7 C9.77614237,7 10,7.22385763 10,7.5 C10,7.77614237 9.77614237,8 9.5,8 L8.5,8 Z M11.5,8 C11.2238576,8 11,7.77614237 11,7.5 C11,7.22385763 11.2238576,7 11.5,7 L12.5,7 C12.7761424,7 13,7.22385763 13,7.5 C13,7.77614237 12.7761424,8 12.5,8 L11.5,8 Z M14.5,8 C14.2238576,8 14,7.77614237 14,7.5 C14,7.22385763 14.2238576,7 14.5,7 L15.5,7 C15.7761424,7 16,7.22385763 16,7.5 C16,7.77614237 15.7761424,8 15.5,8 L14.5,8 Z M17,7.5 C17,7.22385763 17.2238576,7 17.5,7 C17.7761424,7 18,7.22385763 18,7.5 L18,8.5 C18,8.77614237 17.7761424,9 17.5,9 C17.2238576,9 17,8.77614237 17,8.5 L17,7.5 Z M17,10.5 C17,10.2238576 17.2238576,10 17.5,10 C17.7761424,10 18,10.2238576 18,10.5 L18,11.5 C18,11.7761424 17.7761424,12 17.5,12 C17.2238576,12 17,11.7761424 17,11.5 L17,10.5 Z M17,13.5 C17,13.2238576 17.2238576,13 17.5,13 C17.7761424,13 18,13.2238576 18,13.5 L18,14.5 C18,14.7761424 17.7761424,15 17.5,15 C17.2238576,15 17,14.7761424 17,14.5 L17,13.5 Z M16.8130884,16.2258789 C16.9469778,15.9843665 17.2513011,15.8971208 17.4928135,16.0310102 C17.7343259,16.1648996 17.8215716,16.4692229 17.6876822,16.7107353 C17.4827416,17.0804113 17.1867239,17.3929429 16.8289716,17.6178178 C16.59518,17.7647739 16.286523,17.6943798 16.1395669,17.4605882 C15.9926108,17.2267966 16.0630049,16.9181396 16.2967965,16.7711835 C16.5118233,16.6360225 16.6900031,16.4479027 16.8130884,16.2258789 Z M14.5614675,17 C14.8376098,17 15.0614675,17.2238576 15.0614675,17.5 C15.0614675,17.7761424 14.8376098,18 14.5614675,18 L13.5614675,18 C13.2853251,18 13.0614675,17.7761424 13.0614675,17.5 C13.0614675,17.2238576 13.2853251,17 13.5614675,17 L14.5614675,17 Z M11.5614675,17 C11.8376098,17 12.0614675,17.2238576 12.0614675,17.5 C12.0614675,17.7761424 11.8376098,18 11.5614675,18 L10.5614675,18 C10.2853251,18 10.0614675,17.7761424 10.0614675,17.5 C10.0614675,17.2238576 10.2853251,17 10.5614675,17 L11.5614675,17 Z M8.56146746,17 C8.83760983,17 9.06146746,17.2238576 9.06146746,17.5 C9.06146746,17.7761424 8.83760983,18 8.56146746,18 L7.56146746,18 C7.28532508,18 7.06146746,17.7761424 7.06146746,17.5 C7.06146746,17.2238576 7.28532508,17 7.56146746,17 L8.56146746,17 Z M5.56146746,17 C5.83760983,17 6.06146746,17.2238576 6.06146746,17.5 C6.06146746,17.7761424 5.83760983,18 5.56146746,18 L4.56146746,18 C4.28532508,18 4.06146746,17.7761424 4.06146746,17.5 C4.06146746,17.2238576 4.28532508,17 4.56146746,17 L5.56146746,17 Z M3.22779886,16.2951753 C3.37445671,16.5291541 3.30366909,16.8377211 3.06969027,16.9843789 C2.83571145,17.1310368 2.52714447,17.0602491 2.38048662,16.8262703 C2.15682122,16.4694332 2.02609629,16.0609535 2.00352115,15.6335963 C1.98895424,15.3578384 2.20069137,15.1224836 2.47644927,15.1079167 C2.75220716,15.0933498 2.98756192,15.3050869 3.00212882,15.5808448 C3.01567642,15.8373067 3.0937811,16.0813625 3.22779886,16.2951753 Z M3,13.6229349 C3,13.8990773 2.77614237,14.1229349 2.5,14.1229349 C2.22385763,14.1229349 2,13.8990773 2,13.6229349 L2,12.6229349 C2,12.3467925 2.22385763,12.1229349 2.5,12.1229349 C2.77614237,12.1229349 3,12.3467925 3,12.6229349 L3,13.6229349 Z M3,10.6229349 C3,10.8990773 2.77614237,11.1229349 2.5,11.1229349 C2.22385763,11.1229349 2,10.8990773 2,10.6229349 L2,9.62293492 C2,9.34679254 2.22385763,9.12293492 2.5,9.12293492 C2.77614237,9.12293492 3,9.34679254 3,9.62293492 L3,10.6229349 Z M3,7.62293492 C3,7.89907729 2.77614237,8.12293492 2.5,8.12293492 C2.22385763,8.12293492 2,7.89907729 2,7.62293492 L2,7.5 C2,7.22385763 2.22385763,7 2.5,7 C2.77614237,7 3,7.22385763 3,7.5 L3,7.62293492 Z M4.5,2 L15.5,2 C16.8807119,2 18,3.11928813 18,4.5 L18,5.5 C18,5.77614237 17.7761424,6 17.5,6 L2.5,6 C2.22385763,6 2,5.77614237 2,5.5 L2,4.5 C2,3.11928813 3.11928813,2 4.5,2 Z M10.3449053,9.44268434 L12.1629117,11.2606907 C12.3036046,11.4100683 12.3412384,11.6196601 12.2630758,11.7997238 C12.185492,11.9797875 12.0141131,12.0909522 11.815522,12.0909522 L11.1259533,12.0909522 L10.7745107,14.6211076 C10.7241392,15.0084472 10.3871711,15.3031495 9.99056779,15.3031495 C9.9564078,15.3031495 9.92166882,15.3008335 9.88750883,15.2967806 C9.52969739,15.2406193 9.25352253,14.9615495 9.21009882,14.6182127 L8.84939246,12.0909522 L8.18993091,12.0909522 C7.98902384,12.0909522 7.81011812,11.9728397 7.73427135,11.7904601 C7.65842459,11.6069225 7.69953238,11.4036995 7.84254116,11.2606907 L9.66054753,9.44268434 C9.75086886,9.35294199 9.87245528,9.30314946 10.0027264,9.30314946 C10.1329976,9.30314946 10.254584,9.35294199 10.3449053,9.44268434 Z" id="path-1"></path>
+    </defs>
+    <g id="Tutorials/Shink" 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="Rectangle" fill-rule="nonzero"></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>
@@ -45,8 +45,8 @@ const AutoScanningStep = props => (
                                src={radarIcon}
                            />
                            <img
-                                className={styles.peripheralButtonImage}
-                                src={props.peripheralButtonImage}
+                                className={styles.connectionTipIcon}
+                                src={props.connectionTipIconURL}
                            />
                        </React.Fragment>
                    )}
@@ -142,9 +142,9 @@ const AutoScanningStep = props => (
 );

 AutoScanningStep.propTypes = {
+    connectionTipIconURL: PropTypes.string,
    onRefresh: PropTypes.func,
    onStartScan: PropTypes.func,
-    peripheralButtonImage: PropTypes.string,
    phase: PropTypes.oneOf(Object.keys(PHASES))
 };

@@ -15,7 +15,7 @@ const ConnectedStep = props => (
                <div className={styles.peripheralActivity}>
                    <img
                        className={styles.peripheralActivityIcon}
-                        src={props.peripheralImage}
+                        src={props.connectionIconURL}
                    />
                    <img
                        className={styles.bluetoothConnectedIcon}
@@ -64,9 +64,9 @@ const ConnectedStep = props => (
 );

 ConnectedStep.propTypes = {
+    connectionIconURL: PropTypes.string.isRequired,
    onCancel: PropTypes.func,
-    onDisconnect: PropTypes.func,
-    peripheralImage: PropTypes.string.isRequired
+    onDisconnect: PropTypes.func
 };

 export default ConnectedStep;
@@ -18,7 +18,7 @@ const ConnectingStep = props => (
                <div className={styles.peripheralActivity}>
                    <img
                        className={styles.peripheralActivityIcon}
-                        src={props.peripheralImage}
+                        src={props.connectionIconURL}
                    />
                    <img
                        className={styles.bluetoothConnectingIcon}
@@ -63,8 +63,8 @@ const ConnectingStep = props => (

 ConnectingStep.propTypes = {
    connectingMessage: PropTypes.node.isRequired,
-    onDisconnect: PropTypes.func,
-    peripheralImage: PropTypes.string.isRequired
+    connectionIconURL: PropTypes.string.isRequired,
+    onDisconnect: PropTypes.func
 };

 export default ConnectingStep;
@@ -162,7 +162,7 @@
    height: 80px; */
 }

-.peripheral-button-image {
+.connection-tip-icon {
    position: absolute;
 }

@@ -27,7 +27,7 @@ const ConnectionModalComponent = props => (
        className={styles.modalContent}
        contentLabel={props.name}
        headerClassName={styles.header}
-        headerImage={props.smallPeripheralImage}
+        headerImage={props.connectionSmallIconURL}
        id="connectionModal"
        onHelp={props.onHelp}
        onRequestClose={props.onCancel}
@@ -44,17 +44,21 @@ const ConnectionModalComponent = props => (
 );

 ConnectionModalComponent.propTypes = {
-    connectingMessage: PropTypes.node,
+    connectingMessage: PropTypes.node.isRequired,
+    connectionSmallIconURL: PropTypes.string,
+    connectionTipIconURL: PropTypes.string,
    name: PropTypes.node,
    onCancel: PropTypes.func.isRequired,
    onHelp: PropTypes.func.isRequired,
-    peripheralButtonImage: PropTypes.string,
    phase: PropTypes.oneOf(Object.keys(PHASES)).isRequired,
-    smallPeripheralImage: PropTypes.string,
    title: PropTypes.string.isRequired,
    useAutoScan: PropTypes.bool.isRequired
 };

+ConnectionModalComponent.defaultProps = {
+    connectingMessage: 'Connecting'
+};
+
 export {
    ConnectionModalComponent as default,
    PHASES
@@ -17,7 +17,7 @@ const ErrorStep = props => (
                <div className={styles.peripheralActivity}>
                    <img
                        className={styles.peripheralActivityIcon}
-                        src={props.peripheralImage}
+                        src={props.connectionIconURL}
                    />
                </div>
            </Box>
@@ -70,9 +70,9 @@ const ErrorStep = props => (
 );

 ErrorStep.propTypes = {
+    connectionIconURL: PropTypes.string.isRequired,
    onHelp: PropTypes.func,
-    onScanning: PropTypes.func,
-    peripheralImage: PropTypes.string.isRequired
+    onScanning: PropTypes.func
 };

 export default ErrorStep;
@@ -23,7 +23,7 @@ class PeripheralTile extends React.Component {
                <Box className={styles.peripheralTileName}>
                    <img
                        className={styles.peripheralTileImage}
-                        src={this.props.smallPeripheralImage}
+                        src={this.props.connectionSmallIconURL}
                    />
                    <Box className={styles.peripheralTileNameWrapper}>
                        <Box className={styles.peripheralTileNameLabel}>
@@ -77,11 +77,11 @@ class PeripheralTile extends React.Component {
 }

 PeripheralTile.propTypes = {
+    connectionSmallIconURL: PropTypes.string,
    name: PropTypes.string,
    onConnecting: PropTypes.func,
    peripheralId: PropTypes.string,
-    rssi: PropTypes.number,
-    smallPeripheralImage: PropTypes.string
+    rssi: PropTypes.number
 };

 export default PeripheralTile;
@@ -34,11 +34,11 @@ const ScanningStep = props => (
                    <div className={styles.peripheralTilePane}>
                        {props.peripheralList.map(peripheral =>
                            (<PeripheralTile
+                                connectionSmallIconURL={props.connectionSmallIconURL}
                                key={peripheral.peripheralId}
                                name={peripheral.name}
                                peripheralId={peripheral.peripheralId}
                                rssi={peripheral.rssi}
-                                smallPeripheralImage={props.smallPeripheralImage}
                                onConnecting={props.onConnecting}
                            />)
                        )}
@@ -86,6 +86,7 @@ const ScanningStep = props => (
 );

 ScanningStep.propTypes = {
+    connectionSmallIconURL: PropTypes.string,
    onConnecting: PropTypes.func,
    onRefresh: PropTypes.func,
    peripheralList: PropTypes.arrayOf(PropTypes.shape({
@@ -93,8 +94,7 @@ ScanningStep.propTypes = {
        rssi: PropTypes.number,
        peripheralId: PropTypes.string
    })),
-    scanning: PropTypes.bool.isRequired,
-    smallPeripheralImage: PropTypes.string
+    scanning: PropTypes.bool.isRequired
 };

 ScanningStep.defaultProps = {
@@ -33,6 +33,6 @@
    border-top: 1px solid $ui-black-transparent;
 }

-.menu-item-bordered:hover {
+.menu-item-danger:hover {
    background: $error-primary;
 }
@@ -25,9 +25,17 @@ const BorderedMenuItem = props => (
    />
 );

+const DangerousMenuItem = props => (
+    <MenuItem
+        {...props}
+        attributes={{className: classNames(styles.menuItem, styles.menuItemBordered, styles.menuItemDanger)}}
+    />
+);
+

 export {
    BorderedMenuItem,
+    DangerousMenuItem,
    StyledContextMenu as ContextMenu,
    StyledMenuItem as MenuItem
 };
@@ -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%;
+}
@@ -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;
@@ -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>
@@ -34,7 +34,17 @@
 }

 .editor-wrapper {
-    flex-basis: 600px;
+    /*
+        This is carefully balanced--  the minimum width at which the GUI will be displayed is 1024px.
+        At that size, the stage pane is 408px wide, with $space of padding to each side.
+        However, we must also add the border width to the stage pane. All-in-all, the stage pane's final width is
+        408px + ($space + $stage-standard-border-width * 2) (one border & padding per left/right side).
+
+        @todo This is in place to prevent "doubling up" of horizontal scrollbars in narrow windows, but there are likely
+        much better ways to solve that (e.g. undo #2124, remove this flex-basis entirely). However, they run their own
+        risks of breaking things, so let's just leave this as-is for the time being.
+    */
+    flex-basis: calc(1024px - 408px - (($space + $stage-standard-border-width) * 2));
    flex-grow: 1;
    flex-shrink: 0;
    position: relative;
@@ -197,21 +207,9 @@
    /* pad entire wrapper to the left and right; allow children to fill width */
    padding-left: $space;
    padding-right: $space;
-}

-.stage-and-target-wrapper.large {
-    /* Fix the max width to max large stage size (defined in layout_constants.js) + gutter size */
-    max-width: calc(480px + calc($space * 2));
-}
-
-.stage-and-target-wrapper.large-constrained {
-    /* Fix the max width to max largeConstrained stage size (defined in layout_constants.js) + gutter size */
-    max-width: calc(408px + calc($space * 2));
-}
-
-.stage-and-target-wrapper.small {
-    /* Fix the max width to max small stage size (defined in layout_constants.js) + gutter size */
-    max-width: calc(240px + calc($space * 2));
+    /* this will only ever be as wide as the stage */
+    flex-basis: 0;
 }

 .target-wrapper {
@@ -309,6 +307,7 @@ $fade-out-distance: 15px;
    z-index: $z-index-alerts;
    position: absolute;
    margin-top: 53px;
+    pointer-events: none;
 }

 /*
@@ -66,8 +66,10 @@ const GUIComponent = props => {
        backpackVisible,
        blocksTabVisible,
        cardsVisible,
+        canChangeLanguage,
        canCreateNew,
        canEditTitle,
+        canManageFiles,
        canRemix,
        canSave,
        canCreateCopy,
@@ -85,23 +87,26 @@ const GUIComponent = props => {
        isRtl,
        isShared,
        loading,
+        logo,
        renderLogin,
+        onClickAbout,
        onClickAccountNav,
        onCloseAccountNav,
        onLogOut,
        onOpenRegistration,
        onToggleLoginOpen,
-        onUpdateProjectTitle,
        onActivateCostumesTab,
        onActivateSoundsTab,
        onActivateTab,
        onClickLogo,
        onExtensionButtonClick,
+        onProjectTelemetryEvent,
        onRequestCloseBackdropLibrary,
        onRequestCloseCostumeLibrary,
        onRequestCloseTelemetryModal,
        onSeeCommunity,
        onShare,
+        onShowPrivacyPolicy,
        onTelemetryModalCancel,
        onTelemetryModalOptIn,
        onTelemetryModalOptOut,
@@ -159,6 +164,7 @@ const GUIComponent = props => {
                        onOptIn={onTelemetryModalOptIn}
                        onOptOut={onTelemetryModalOptOut}
                        onRequestClose={onRequestCloseTelemetryModal}
+                        onShowPrivacyPolicy={onShowPrivacyPolicy}
                    />
                ) : null}
                {loading ? (
@@ -201,26 +207,30 @@ 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}
+                    onClickAbout={onClickAbout}
                    onClickAccountNav={onClickAccountNav}
                    onClickLogo={onClickLogo}
                    onCloseAccountNav={onCloseAccountNav}
                    onLogOut={onLogOut}
                    onOpenRegistration={onOpenRegistration}
+                    onProjectTelemetryEvent={onProjectTelemetryEvent}
                    onSeeCommunity={onSeeCommunity}
                    onShare={onShare}
                    onToggleLoginOpen={onToggleLoginOpen}
-                    onUpdateProjectTitle={onUpdateProjectTitle}
                />
                <Box className={styles.bodyWrapper}>
                    <Box className={styles.flexWrapper}>
@@ -326,6 +336,7 @@ const GUIComponent = props => {

                        <Box className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}>
                            <StageWrapper
+                                isFullScreen={isFullScreen}
                                isRendererSupported={isRendererSupported}
                                isRtl={isRtl}
                                stageSize={stageSize}
@@ -357,9 +368,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,
@@ -376,9 +389,11 @@ GUIComponent.propTypes = {
    isRtl: PropTypes.bool,
    isShared: PropTypes.bool,
    loading: PropTypes.bool,
+    logo: PropTypes.string,
    onActivateCostumesTab: PropTypes.func,
    onActivateSoundsTab: PropTypes.func,
    onActivateTab: PropTypes.func,
+    onClickAbout: PropTypes.func,
    onClickAccountNav: PropTypes.func,
    onClickLogo: PropTypes.func,
    onCloseAccountNav: PropTypes.func,
@@ -390,12 +405,12 @@ GUIComponent.propTypes = {
    onRequestCloseTelemetryModal: PropTypes.func,
    onSeeCommunity: PropTypes.func,
    onShare: PropTypes.func,
+    onShowPrivacyPolicy: PropTypes.func,
    onTabSelect: PropTypes.func,
    onTelemetryModalCancel: PropTypes.func,
    onTelemetryModalOptIn: PropTypes.func,
    onTelemetryModalOptOut: PropTypes.func,
    onToggleLoginOpen: PropTypes.func,
-    onUpdateProjectTitle: PropTypes.func,
    renderLogin: PropTypes.func,
    showComingSoon: PropTypes.bool,
    soundsTabVisible: PropTypes.bool,
@@ -409,8 +424,10 @@ GUIComponent.defaultProps = {
    backpackHost: null,
    backpackVisible: false,
    basePath: './',
+    canChangeLanguage: true,
    canCreateNew: false,
    canEditTitle: false,
+    canManageFiles: true,
    canRemix: false,
    canSave: false,
    canCreateCopy: false,
@@ -420,7 +437,6 @@ GUIComponent.defaultProps = {
    isCreating: false,
    isShared: false,
    loading: false,
-    onUpdateProjectTitle: () => {},
    showComingSoon: false,
    stageSizeMode: STAGE_SIZE_MODES.large
 };
@@ -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;
 }
@@ -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
@@ -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>
@@ -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>
@@ -7,6 +7,7 @@
    align-items: center;
    justify-content: flex-start;
    flex-basis: 160px;
+    position: relative;
    height: 160px;
    max-width: 160px;
    margin: $space;
@@ -138,7 +139,9 @@
 .featured-description {
    display: block;
    font-weight: normal;
-    line-height: 2;
+    line-height: 1.375rem;
+    padding-top: .3125rem;
+    padding-bottom: .25rem;
 }

 .featured-extension-metadata {
@@ -178,6 +181,10 @@
    font-weight: bold;
 }

+.featured-extension-metadata-detail img{
+    margin-right: 0.25rem;
+}
+
 .coming-soon-text {
    position: absolute;
    background-color: $data-primary;
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';

 import Box from '../box/box.jsx';
+import PlayButton from '../../containers/play-button.jsx';
 import styles from './library-item.css';
 import classNames from 'classnames';

@@ -72,12 +73,12 @@ class LibraryItemComponent extends React.PureComponent {
                                    <div
                                        className={styles.featuredExtensionMetadataDetail}
                                    >
-                                        <img
-                                            src={this.props.bluetoothRequired ?
-                                                bluetoothIconURL :
-                                                internetConnectionIconURL
-                                            }
-                                        />
+                                        {this.props.bluetoothRequired ? (
+                                            <img src={bluetoothIconURL} />
+                                        ) : null}
+                                        {this.props.internetConnectionRequired ? (
+                                            <img src={internetConnectionIconURL} />
+                                        ) : null}
                                    </div>
                                </div>
                            ) : null}
@@ -106,8 +107,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,12 +117,16 @@ 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}>
+                    <Box
+                        className={styles.libraryItemImageContainer}
+                        onMouseEnter={this.props.showPlayButton ? this.props.onMouseEnter : null}
+                        onMouseLeave={this.props.showPlayButton ? this.props.onMouseLeave : null}
+                    >
                        <img
                            className={styles.libraryItemImage}
                            src={this.props.iconURL}
@@ -128,6 +134,13 @@ class LibraryItemComponent extends React.PureComponent {
                    </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>
        );
    }
@@ -149,6 +162,7 @@ LibraryItemComponent.propTypes = {
    iconURL: PropTypes.string,
    insetIconURL: PropTypes.string,
    internetConnectionRequired: PropTypes.bool,
+    isPlaying: PropTypes.bool,
    name: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.node
@@ -158,11 +172,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;
@@ -12,6 +12,7 @@
    overflow-y: auto;
    height: auto;
    padding: 0.5rem;
+    height: calc(100% - $library-header-height);
 }

 .library-scroll-grid.withFilterBar {
@@ -59,3 +60,11 @@
    height: $library-filter-bar-height;
    overflow: hidden;
 }
+
+.spinner-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
@@ -9,7 +9,7 @@ import Modal from '../../containers/modal.jsx';
 import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
-import analytics from '../../lib/analytics';
+import Spinner from '../spinner/spinner.jsx';

 import styles from './library.css';

@@ -38,16 +38,25 @@ class LibraryComponent extends React.Component {
            'handleFilterClear',
            'handleMouseEnter',
            'handleMouseLeave',
+            'handlePlayingEnd',
            'handleSelect',
            'handleTagClick',
            'setFilteredDataRef'
        ]);
        this.state = {
-            selectedItem: null,
+            playingItem: null,
            filterQuery: '',
-            selectedTag: ALL_TAG.tag
+            selectedTag: ALL_TAG.tag,
+            loaded: false
        };
    }
+    componentDidMount () {
+        // Allow the spinner to display before loading the content
+        setTimeout(() => {
+            this.setState({loaded: true});
+        });
+        if (this.props.setStopHandler) this.props.setStopHandler(this.handlePlayingEnd);
+    }
    componentDidUpdate (prevProps, prevState) {
        if (prevState.filterQuery !== this.state.filterQuery ||
            prevState.selectedTag !== this.state.selectedTag) {
@@ -60,25 +69,60 @@ class LibraryComponent extends React.Component {
    }
    handleClose () {
        this.props.onRequestClose();
-        analytics.pageview(`/${this.props.id}/search?q=${this.state.filterQuery}`);
    }
    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: ''});
@@ -164,7 +208,7 @@ class LibraryComponent extends React.Component {
                    })}
                    ref={this.setFilteredDataRef}
                >
-                    {this.getFilteredData().map((dataItem, index) => (
+                    {this.state.loaded ? this.getFilteredData().map((dataItem, index) => (
                        <LibraryItem
                            bluetoothRequired={dataItem.bluetoothRequired}
                            collaborator={dataItem.collaborator}
@@ -179,13 +223,22 @@ class LibraryComponent extends React.Component {
                            id={index}
                            insetIconURL={dataItem.insetIconURL}
                            internetConnectionRequired={dataItem.internetConnectionRequired}
-                            key={`item_${index}`}
+                            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
+                                level="primary"
+                            />
+                        </div>
+                    )}
                </div>
            </Modal>
        );
@@ -214,12 +267,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);
@@ -91,7 +91,8 @@ LoupeComponent.propTypes = {
        color: PropTypes.shape({
            r: PropTypes.number,
            g: PropTypes.number,
-            b: PropTypes.number
+            b: PropTypes.number,
+            a: PropTypes.number
        }),
        data: PropTypes.instanceOf(Uint8Array),
        width: PropTypes.number,
@@ -5,7 +5,7 @@
    color: $ui-white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
-    justify-content: start;
+    justify-content: flex-start;
    align-items: center;
    cursor: default;
 }
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M10 2c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm-.072 10.42c-.256 0-.472.076-.648.227-.176.151-.264.338-.264.56 0 .25.091.445.273.584.182.139.395.209.639.209.236 0 .444-.07.624-.211s.27-.335.27-.581c0-.222-.086-.409-.258-.56-.172-.151-.384-.227-.636-.227zm.144-6.42c-.624 0-1.17.113-1.638.338-.468.225-.824.51-1.068.853-.244.343-.366.683-.366 1.017 0 .162.077.313.231.452.154.139.343.209.567.209.38 0 .638-.199.774-.597.144-.38.32-.668.528-.864.208-.196.532-.293.972-.293.376 0 .683.097.921.291.238.194.357.432.357.713 0 .144-.039.278-.117.402-.078.123-.174.235-.288.336-.114.1-.299.249-.555.446-.292.225-.524.42-.696.584-.172.164-.31.354-.414.571-.104.217-.156.473-.156.769 0 .236.071.414.213.534.142.12.317.18.525.18.4 0 .638-.183.714-.55l.099-.362.093-.206.183-.227.327-.288c.492-.387.833-.663 1.023-.827.19-.164.354-.358.492-.584.138-.225.207-.488.207-.787 0-.38-.121-.733-.363-1.057-.242-.324-.585-.58-1.029-.769-.444-.188-.956-.283-1.536-.283z" id="a"/></defs><g transform="translate(-2 -2)" fill="none"><mask><use xlink:href="#a"/></mask><use fill="#fff" xlink:href="#a"/></g></svg>
@@ -1,12 +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.1 (47250) - http://www.bohemiancoding.com/sketch -->
-    <title>Feedback</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Feedback" fill="#4C97FF">
-            <path d="M12.3811686,14.2770244 C12.3811686,14.3987659 12.3515563,14.506558 12.306433,14.6257633 L11.4998525,16.6002595 C11.2770558,16.478518 10.93299,16.3846755 10.4704753,16.3846755 C10.0234717,16.3846755 9.6949171,16.478518 9.47071028,16.58631 L8.66412979,14.6257633 C8.60490535,14.506558 8.59080429,14.3848164 8.59080429,14.2643429 C8.60490535,14.2503934 8.60490535,14.2237624 8.60490535,14.2098129 L8.60490535,14.1705005 C8.60490535,13.9828155 8.67964095,13.7938625 8.813601,13.6188589 C9.1576668,13.1775457 9.79926492,12.9086997 10.4859864,12.9086997 C11.1727079,12.9086997 11.8143061,13.1775457 12.1428607,13.6188589 C12.2472085,13.7684996 12.3360452,13.9409669 12.3670675,14.103289 C12.3811686,14.1565509 12.3811686,14.2098129 12.3811686,14.2643429 L12.3811686,14.2770244 Z M8.60490535,5.94153049 C8.60490535,5.50782611 8.89115681,5.12865181 9.33393002,4.89024122 C9.59056927,4.7520138 9.91771381,4.9143359 9.91771381,5.18445004 L9.91771381,11.6621167 C9.91771381,11.8168299 9.80490535,11.9550573 9.63851287,11.9918334 C9.46789007,12.0311458 9.3029077,12.0831396 9.14638596,12.1452786 C8.89115681,12.2467299 8.60490535,12.0844078 8.60490535,11.8345839 L8.60490535,5.94153049 Z M12.3670675,5.94153049 L12.3670675,11.8333158 C12.3670675,12.0780671 12.0892767,12.2505343 11.8410981,12.1516193 C11.6775258,12.0844078 11.5054929,12.032414 11.3278196,11.9931016 C11.1529665,11.9550573 11.0373378,11.8054166 11.0373378,11.6443627 L11.0373378,5.18191375 C11.0373378,4.9143359 11.3630722,4.75074565 11.6211216,4.88770493 C12.0709453,5.12611553 12.3670675,5.50528983 12.3670675,5.94153049 Z M10.4859864,1.48528137 C8.82911216,1.48528137 7.48528137,2.53149809 7.48528137,3.82119796 L7.48528137,14.2237624 C7.48528137,14.4786589 7.5148936,14.7335553 7.62065153,14.9757703 L9.1576668,18.7066425 C9.3522614,19.177123 9.87400053,19.4852814 10.4859864,19.4852814 C11.0979723,19.4852814 11.6197115,19.177123 11.8143061,18.7066425 L13.3513213,14.9757703 C13.4556692,14.7335553 13.4852814,14.4786589 13.4852814,14.2237624 L13.4852814,3.82119796 C13.4852814,2.53149809 12.1428607,1.48528137 10.4859864,1.48528137 Z" id="feedback" transform="translate(10.485281, 10.485281) rotate(45.000000) translate(-10.485281, -10.485281) "></path>
-        </g>
-    </g>
-</svg>
@@ -218,3 +218,9 @@
 .mystuff > a {
  background-image: url("/images/mystuff.png");
 }
+
+.about-icon {
+    height: 1.25rem;
+    margin: 0.5rem;
+    vertical-align: middle;
+}
@@ -1,11 +1,14 @@
 import classNames from 'classnames';
 import {connect} from 'react-redux';
+import {compose} from 'redux';
 import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
 import PropTypes from 'prop-types';
 import bindAll from 'lodash.bindall';
 import bowser from 'bowser';
 import React from 'react';

+import VM from 'scratch-vm';
+
 import Box from '../box/box.jsx';
 import Button from '../button/button.jsx';
 import CommunityButton from './community-button.jsx';
@@ -25,6 +28,7 @@ import LoginDropdown from './login-dropdown.jsx';
 import SB3Downloader from '../../containers/sb3-downloader.jsx';
 import DeletionRestorer from '../../containers/deletion-restorer.jsx';
 import TurboMode from '../../containers/turbo-mode.jsx';
+import MenuBarHOC from '../../containers/menu-bar-hoc.jsx';

 import {openTipsLibrary} from '../../reducers/modals';
 import {setPlayer} from '../../reducers/mode';
@@ -55,15 +59,17 @@ import {
    loginMenuOpen
 } from '../../reducers/menus';

+import collectMetadata from '../../lib/collect-metadata';
+
 import styles from './menu-bar.css';

 import helpIcon from '../../lib/assets/icon--tutorials.svg';
 import mystuffIcon from './icon--mystuff.png';
-import feedbackIcon from './icon--feedback.svg';
 import profileIcon from './icon--profile.png';
 import remixIcon from './icon--remix.svg';
 import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
+import aboutIcon from './icon--about.svg';

 import scratchLogo from './scratch-logo.svg';

@@ -136,6 +142,19 @@ MenuItemTooltip.propTypes = {
    isRtl: PropTypes.bool
 };

+const AboutButton = props => (
+    <Button
+        className={classNames(styles.menuBarItem, styles.hoverable)}
+        iconClassName={styles.aboutIcon}
+        iconSrc={aboutIcon}
+        onClick={props.onClick}
+    />
+);
+
+AboutButton.propTypes = {
+    onClick: PropTypes.func.isRequired
+};
+
 class MenuBar extends React.Component {
    constructor (props) {
        super(props);
@@ -146,10 +165,10 @@ class MenuBar extends React.Component {
            'handleClickSaveAsCopy',
            'handleClickSeeCommunity',
            'handleClickShare',
-            'handleCloseFileMenuAndThen',
            'handleKeyPress',
            'handleLanguageMouseUp',
            'handleRestoreOption',
+            'getSaveToComputerHandler',
            'restoreOptionMessage'
        ]);
    }
@@ -160,17 +179,14 @@ class MenuBar extends React.Component {
        document.removeEventListener('keydown', this.handleKeyPress);
    }
    handleClickNew () {
-        let readyToReplaceProject = true;
        // if the project is dirty, and user owns the project, we will autosave.
        // but if they are not logged in and can't save, user should consider
        // downloading or logging in first.
        // Note that if user is logged in and editing someone else's project,
        // they'll lose their work.
-        if (this.props.projectChanged && !this.props.canCreateNew) {
-            readyToReplaceProject = confirm( // eslint-disable-line no-alert
-                this.props.intl.formatMessage(sharedMessages.replaceProjectWarning)
-            );
-        }
+        const readyToReplaceProject = this.props.confirmReadyToReplaceProject(
+            this.props.intl.formatMessage(sharedMessages.replaceProjectWarning)
+        );
        this.props.onRequestCloseFile();
        if (readyToReplaceProject) {
            this.props.onClickNew(this.props.canSave && this.props.canCreateNew);
@@ -190,8 +206,8 @@ class MenuBar extends React.Component {
        this.props.onRequestCloseFile();
    }
    handleClickSeeCommunity (waitForUpdate) {
-        if (this.props.canSave) { // save before transitioning to project page
-            this.props.autoUpdateProject();
+        if (this.props.shouldSaveBeforeTransition()) {
+            this.props.autoUpdateProject(); // save before transitioning to project page
            waitForUpdate(true); // queue the transition to project page
        } else {
            waitForUpdate(false); // immediately transition to project page
@@ -216,12 +232,6 @@ class MenuBar extends React.Component {
            this.props.onRequestCloseEdit();
        };
    }
-    handleCloseFileMenuAndThen (fn) {
-        return () => {
-            this.props.onRequestCloseFile();
-            fn();
-        };
-    }
    handleKeyPress (event) {
        const modifier = bowser.mac ? event.metaKey : event.ctrlKey;
        if (modifier && event.key === 's') {
@@ -229,6 +239,16 @@ class MenuBar extends React.Component {
            event.preventDefault();
        }
    }
+    getSaveToComputerHandler (downloadProjectCallback) {
+        return () => {
+            this.props.onRequestCloseFile();
+            downloadProjectCallback();
+            if (this.props.onProjectTelemetryEvent) {
+                const metadata = collectMetadata(this.props.vm, this.props.projectTitle, this.props.locale);
+                this.props.onProjectTelemetryEvent('projectDidSave', metadata);
+            }
+        };
+    }
    handleLanguageMouseUp (e) {
        if (!this.props.languageMenuOpen) {
            this.props.onClickLanguage(e);
@@ -305,6 +325,8 @@ class MenuBar extends React.Component {
                {remixMessage}
            </Button>
        );
+        // Show the About button only if we have a handler for it (like in the desktop app)
+        const aboutButton = this.props.onClickAbout ? <AboutButton onClick={this.props.onClickAbout} /> : null;
        return (
            <Box
                className={classNames(
@@ -321,11 +343,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>
@@ -339,84 +361,85 @@ 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 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}
+                                        >
+                                            {(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)}
                                            >
                                                <FormattedMessage
-                                                    defaultMessage="Load from your computer"
-                                                    description={
-                                                        'Menu bar item for uploading a project from your computer'
-                                                    }
-                                                    id="gui.menuBar.uploadFromComputer"
+                                                    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"
                                                />
-                                                {renderFileInput()}
                                            </MenuItem>
-                                        )}
-                                    </SBFileUploader>
-                                    <SB3Downloader>{(className, downloadProject) => (
-                                        <MenuItem
-                                            className={className}
-                                            onClick={this.handleCloseFileMenuAndThen(downloadProject)}
-                                        >
-                                            <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
@@ -487,7 +510,6 @@ class MenuBar extends React.Component {
                            >
                                <ProjectTitleInput
                                    className={classNames(styles.titleFieldGrowable)}
-                                    onUpdateProjectTitle={this.props.onUpdateProjectTitle}
                                />
                            </MenuBarItemTooltip>
                        </div>
@@ -638,25 +660,6 @@ class MenuBar extends React.Component {
                    ) : (
                        // ******** no login session is available, so don't show login stuff
                        <React.Fragment>
-                            <div className={classNames(styles.menuBarItem, styles.feedbackButtonWrapper)}>
-                                <a
-                                    className={styles.feedbackLink}
-                                    href="https://scratch.mit.edu/discuss/topic/312261/"
-                                    rel="noopener noreferrer"
-                                    target="_blank"
-                                >
-                                    <Button
-                                        className={styles.feedbackButton}
-                                        iconSrc={feedbackIcon}
-                                    >
-                                        <FormattedMessage
-                                            defaultMessage="Give Feedback"
-                                            description="Label for feedback form modal button"
-                                            id="gui.menuBar.giveFeedback"
-                                        />
-                                    </Button>
-                                </a>
-                            </div>
                            {this.props.showComingSoon ? (
                                <React.Fragment>
                                    <MenuBarItemTooltip id="mystuff">
@@ -702,6 +705,8 @@ class MenuBar extends React.Component {
                        </React.Fragment>
                    )}
                </div>
+
+                {aboutButton}
            </Box>
        );
    }
@@ -713,13 +718,16 @@ 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,
    className: PropTypes.string,
+    confirmReadyToReplaceProject: PropTypes.func,
    editMenuOpen: PropTypes.bool,
    enableCommunity: PropTypes.bool,
    fileMenuOpen: PropTypes.bool,
@@ -729,7 +737,10 @@ MenuBar.propTypes = {
    isShowingProject: PropTypes.bool,
    isUpdating: PropTypes.bool,
    languageMenuOpen: PropTypes.bool,
+    locale: PropTypes.string.isRequired,
    loginMenuOpen: PropTypes.bool,
+    logo: PropTypes.string,
+    onClickAbout: PropTypes.func,
    onClickAccount: PropTypes.func,
    onClickEdit: PropTypes.func,
    onClickFile: PropTypes.func,
@@ -743,6 +754,7 @@ MenuBar.propTypes = {
    onLogOut: PropTypes.func,
    onOpenRegistration: PropTypes.func,
    onOpenTipLibrary: PropTypes.func,
+    onProjectTelemetryEvent: PropTypes.func,
    onRequestCloseAccount: PropTypes.func,
    onRequestCloseEdit: PropTypes.func,
    onRequestCloseFile: PropTypes.func,
@@ -751,20 +763,22 @@ MenuBar.propTypes = {
    onSeeCommunity: PropTypes.func,
    onShare: PropTypes.func,
    onToggleLoginOpen: PropTypes.func,
-    onUpdateProjectTitle: PropTypes.func,
-    projectChanged: PropTypes.bool,
    projectTitle: PropTypes.string,
    renderLogin: PropTypes.func,
    sessionExists: PropTypes.bool,
+    shouldSaveBeforeTransition: PropTypes.func,
    showComingSoon: PropTypes.bool,
-    username: PropTypes.string
+    userOwnsProject: PropTypes.bool,
+    username: PropTypes.string,
+    vm: PropTypes.instanceOf(VM).isRequired
 };

 MenuBar.defaultProps = {
+    logo: scratchLogo,
    onShare: () => {}
 };

-const mapStateToProps = state => {
+const mapStateToProps = (state, ownProps) => {
    const loadingState = state.scratchGui.projectState.loadingState;
    const user = state.session && state.session.session && state.session.session.user;
    return {
@@ -775,11 +789,14 @@ const mapStateToProps = state => {
        isUpdating: getIsUpdating(loadingState),
        isShowingProject: getIsShowingProject(loadingState),
        languageMenuOpen: languageMenuOpen(state),
+        locale: state.locales.locale,
        loginMenuOpen: loginMenuOpen(state),
-        projectChanged: state.scratchGui.projectChanged,
        projectTitle: state.scratchGui.projectTitle,
        sessionExists: state.session && typeof state.session.session !== 'undefined',
-        username: user ? user.username : null
+        username: user ? user.username : null,
+        userOwnsProject: ownProps.authorUsername && user &&
+            (ownProps.authorUsername === user.username),
+        vm: state.scratchGui.vm
    };
 };

@@ -803,7 +820,11 @@ const mapDispatchToProps = dispatch => ({
    onSeeCommunity: () => dispatch(setPlayer(true))
 });

-export default injectIntl(connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(MenuBar));
+export default compose(
+    injectIntl,
+    MenuBarHOC,
+    connect(
+        mapStateToProps,
+        mapDispatchToProps
+    )
+)(MenuBar);
@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import bindAll from 'lodash.bindall';
 import React from 'react';
 import {defineMessages, intlShape, injectIntl} from 'react-intl';
+import {setProjectTitle} from '../../reducers/project-title';

 import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
 import Input from '../forms/input.jsx';
@@ -19,39 +19,27 @@ const messages = defineMessages({
    }
 });

-class ProjectTitleInput extends React.Component {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handleUpdateProjectTitle'
-        ]);
-    }
-    // call onUpdateProjectTitle if it is defined (only defined when gui
-    // is used within scratch-www)
-    handleUpdateProjectTitle (newTitle) {
-        if (this.props.onUpdateProjectTitle) {
-            this.props.onUpdateProjectTitle(newTitle);
-        }
-    }
-    render () {
-        return (
-            <BufferedInput
-                className={classNames(styles.titleField, this.props.className)}
-                maxLength="100"
-                placeholder={this.props.intl.formatMessage(messages.projectTitlePlaceholder)}
-                tabIndex="0"
-                type="text"
-                value={this.props.projectTitle}
-                onSubmit={this.handleUpdateProjectTitle}
-            />
-        );
-    }
-}
+const ProjectTitleInput = ({
+    className,
+    intl,
+    onSubmit,
+    projectTitle
+}) => (
+    <BufferedInput
+        className={classNames(styles.titleField, className)}
+        maxLength="100"
+        placeholder={intl.formatMessage(messages.projectTitlePlaceholder)}
+        tabIndex="0"
+        type="text"
+        value={projectTitle}
+        onSubmit={onSubmit}
+    />
+);

 ProjectTitleInput.propTypes = {
    className: PropTypes.string,
    intl: intlShape.isRequired,
-    onUpdateProjectTitle: PropTypes.func,
+    onSubmit: PropTypes.func,
    projectTitle: PropTypes.string
 };

@@ -59,7 +47,9 @@ const mapStateToProps = state => ({
    projectTitle: state.scratchGui.projectTitle
 });

-const mapDispatchToProps = () => ({});
+const mapDispatchToProps = dispatch => ({
+    onSubmit: title => dispatch(setProjectTitle(title))
+});

 export default injectIntl(connect(
    mapStateToProps,
@@ -37,6 +37,10 @@
    background-color: $ui-black-transparent;
 }

+.menu-item.hoverable {
+    cursor: pointer;
+}
+
 .menu-section {
    border-top: 1px solid $ui-black-transparent;
 }
@@ -39,7 +39,11 @@ const MenuItem = ({
    onClick
 }) => (
    <li
-        className={classNames(styles.menuItem, className)}
+        className={classNames(
+            styles.menuItem,
+            styles.hoverable,
+            className
+        )}
        onClick={onClick}
    >
        {children}
@@ -54,7 +58,7 @@ MenuItem.propTypes = {


 const addDividerClassToFirstChild = (child, id) => (
-    React.cloneElement(child, {
+    child && React.cloneElement(child, {
        className: classNames(
            child.className,
            {[styles.menuSection]: id === 0}
@@ -43,6 +43,7 @@
    margin: 0 5px;
    border-radius: calc($space / 2);
    padding: 0 2px;
+    white-space: pre-wrap;
    transform: translateZ(0); /* Fixes flickering in Safari */
 }

@@ -53,6 +54,7 @@
    text-align: center;
    color: white;
    font-size: 1rem;
+    white-space: pre-wrap;
    transform: translateZ(0); /* Fixes flickering in Safari */
 }

@@ -149,7 +151,7 @@
    overflow: hidden; /* Don't let long values escape container */
    text-overflow: ellipsis;
    user-select: text; /* Allow selecting list values for 2.0 compatibility, only relevant in player */
-    white-space: nowrap;
+    white-space: pre;
 }

 .list-input {
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Draggable from 'react-draggable';
 import {FormattedMessage} from 'react-intl';
 import {ContextMenuTrigger} from 'react-contextmenu';
-import {ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
+import {BorderedMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
 import Box from '../box/box.jsx';
 import DefaultMonitor from './default-monitor.jsx';
 import LargeMonitor from './large-monitor.jsx';
@@ -84,6 +84,14 @@ const MonitorComponent = props => (
                            id="gui.monitor.contextMenu.slider"
                        />
                    </MenuItem>}
+                {props.onSliderPromptOpen && props.mode === 'slider' &&
+                    <BorderedMenuItem onClick={props.onSliderPromptOpen}>
+                        <FormattedMessage
+                            defaultMessage="change slider range"
+                            description="Menu item to change the slider range"
+                            id="gui.monitor.contextMenu.sliderRange"
+                        />
+                    </BorderedMenuItem>}
                {props.onImport &&
                    <MenuItem onClick={props.onImport}>
                        <FormattedMessage
@@ -122,7 +130,8 @@ MonitorComponent.propTypes = {
    onNextMode: PropTypes.func.isRequired,
    onSetModeToDefault: PropTypes.func,
    onSetModeToLarge: PropTypes.func,
-    onSetModeToSlider: PropTypes.func
+    onSetModeToSlider: PropTypes.func,
+    onSliderPromptOpen: PropTypes.func
 };

 MonitorComponent.defaultProps = {
@@ -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>
@@ -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>
@@ -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;
+}
@@ -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);
@@ -20,8 +20,10 @@
    border: 1px solid $ui-black-transparent;
    border-radius: 5px;
    padding: 3px;
-
+    /* Force these to be on their own render layer because they update often */
+    transform: translateZ(0);
 }
+
 .meter-container {
    margin-right: 5px;
    height: 180px;
@@ -0,0 +1,55 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.modal-content {
+    width: 360px;
+}
+
+.body {
+    background: $ui-white;
+    padding: 1.5rem 2.25rem;
+}
+
+.label {
+    font-weight: 500;
+    margin: 0 0 0.75rem;
+}
+
+.min-input, .max-input {
+    margin-bottom: 1.5rem;
+    width: 100%;
+    border: 1px solid $ui-black-transparent;
+    border-radius: 5px;
+    padding: 0 1rem;
+    height: 3rem;
+    color: $text-primary-transparent;
+    font-size: .875rem;
+}
+
+.button-row {
+    font-weight: bolder;
+    text-align: right;
+}
+
+.button-row button {
+    padding: 0.75rem 1rem;
+    border-radius: 0.25rem;
+    background: white;
+    border: 1px solid $ui-black-transparent;
+    font-weight: 600;
+    font-size: 0.85rem;
+}
+
+.button-row button.ok-button {
+    background: $motion-primary;
+    border: $motion-primary;
+    color: white;
+}
+
+[dir="ltr"] .button-row button + button {
+    margin-left: 0.5rem;
+}
+
+[dir="rtl"] .button-row button + button {
+    margin-right: 0.5rem;
+}
@@ -0,0 +1,102 @@
+import {defineMessages, FormattedMessage, intlShape, injectIntl} from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Box from '../box/box.jsx';
+import Modal from '../../containers/modal.jsx';
+
+import styles from './slider-prompt.css';
+
+
+const messages = defineMessages({
+    minValue: {
+        defaultMessage: 'Minimum value',
+        description: 'Label of slider modal',
+        id: 'gui.sliderModal.min'
+    },
+    maxValue: {
+        defaultMessage: 'Maximum value',
+        description: 'Label of slider modal',
+        id: 'gui.sliderModal.max'
+    },
+    title: {
+        defaultMessage: 'Change slider range',
+        description: 'Title of slider modal',
+        id: 'gui.sliderModal.title'
+    }
+});
+
+const SliderPromptComponent = props => (
+    <Modal
+        className={styles.modalContent}
+        contentLabel={props.intl.formatMessage(messages.title)}
+        id="sliderPrompt"
+        onRequestClose={props.onCancel}
+    >
+        <Box className={styles.body}>
+            <Box className={styles.label}>
+                {props.intl.formatMessage(messages.minValue)}
+            </Box>
+            <Box>
+                <input
+                    className={styles.minInput}
+                    name={props.intl.formatMessage(messages.minValue)}
+                    pattern="-?[0-9]*(\.[0-9]+)?"
+                    type="text"
+                    value={props.minValue}
+                    onChange={props.onChangeMin}
+                    onKeyPress={props.onKeyPress}
+                />
+            </Box>
+            <Box className={styles.label}>
+                {props.intl.formatMessage(messages.maxValue)}
+            </Box>
+            <Box>
+                <input
+                    className={styles.maxInput}
+                    name={props.intl.formatMessage(messages.maxValue)}
+                    pattern="-?[0-9]*(\.[0-9]+)?"
+                    type="text"
+                    value={props.maxValue}
+                    onChange={props.onChangeMax}
+                    onKeyPress={props.onKeyPress}
+                />
+            </Box>
+            <Box className={styles.buttonRow}>
+                <button
+                    className={styles.cancelButton}
+                    onClick={props.onCancel}
+                >
+                    <FormattedMessage
+                        defaultMessage="Cancel"
+                        description="Button in prompt for cancelling the dialog"
+                        id="gui.sliderPrompt.cancel"
+                    />
+                </button>
+                <button
+                    className={styles.okButton}
+                    onClick={props.onOk}
+                >
+                    <FormattedMessage
+                        defaultMessage="OK"
+                        description="Button in prompt for confirming the dialog"
+                        id="gui.sliderPrompt.ok"
+                    />
+                </button>
+            </Box>
+        </Box>
+    </Modal>
+);
+
+SliderPromptComponent.propTypes = {
+    intl: intlShape,
+    maxValue: PropTypes.string,
+    minValue: PropTypes.string,
+    onCancel: PropTypes.func.isRequired,
+    onChangeMax: PropTypes.func.isRequired,
+    onChangeMin: PropTypes.func.isRequired,
+    onKeyPress: PropTypes.func.isRequired,
+    onOk: PropTypes.func.isRequired
+};
+
+export default injectIntl(SliderPromptComponent);
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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;
 }
@@ -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,83 @@ 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}
+                disabled={props.tooLoud}
+                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,
+    tooLoud: PropTypes.bool.isRequired,
    trimEnd: PropTypes.number,
    trimStart: PropTypes.number
 };
@@ -39,6 +39,16 @@
    height: .5rem;
 }

+.large {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+.large::before, .large::after {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
@keyframes spin {
  0% {
    transform: rotate(0deg);
@@ -71,3 +81,10 @@
 .spinner.info::after {
    border-top-color: $ui-white;
 }
+
+.spinner.primary {
+    border-color: $motion-transparent;
+}
+.spinner.primary::after {
+    border-top-color: $motion-primary;
+}
@@ -8,7 +8,8 @@ const SpinnerComponent = function (props) {
    const {
        className,
        level,
-        small
+        small,
+        large
    } = props;
    return (
        <div
@@ -16,18 +17,24 @@ const SpinnerComponent = function (props) {
                className,
                styles.spinner,
                styles[level],
-                {[styles.small]: small}
+                {
+                    [styles.small]: small,
+                    [styles.large]: large
+                }
            )}
        />
    );
 };
 SpinnerComponent.propTypes = {
    className: PropTypes.string,
+    large: PropTypes.bool,
    level: PropTypes.string,
    small: PropTypes.bool
 };
 SpinnerComponent.defaultProps = {
    className: '',
-    level: 'info'
+    large: false,
+    level: 'info',
+    small: false
 };
 export default SpinnerComponent;
@@ -20,7 +20,6 @@
    cursor: pointer;

    user-select: none;
-    touch-action: none;
 }

 .sprite-selector-item.is-selected {
@@ -95,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 {
@@ -2,10 +2,10 @@ 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 {BorderedMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
+import {DangerousMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
 import {FormattedMessage} from 'react-intl';

 // react-contextmenu requires unique id to match trigger and context menu
@@ -23,8 +23,9 @@ const SpriteSelectorItem = props => (
            onMouseDown: props.onMouseDown,
            onTouchStart: props.onMouseDown
        }}
-        disable={props.dragging}
+        disable={props.preventContextMenu}
        id={`${props.name}-${contextMenuId}`}
+        ref={props.componentRef}
    >
        {typeof props.number === 'undefined' ? null : (
            <div className={styles.number}>{props.number}</div>
@@ -47,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 }
@@ -74,13 +74,13 @@ const SpriteSelectorItem = props => (
                    </MenuItem>
                ) : null }
                {props.onDeleteButtonClick ? (
-                    <BorderedMenuItem onClick={props.onDeleteButtonClick}>
+                    <DangerousMenuItem onClick={props.onDeleteButtonClick}>
                        <FormattedMessage
                            defaultMessage="delete"
                            description="Menu item to delete in the right click menu"
                            id="gui.spriteSelectorItem.contextMenuDelete"
                        />
-                    </BorderedMenuItem>
+                    </DangerousMenuItem>
                ) : null }
            </ContextMenu>
        ) : null}
@@ -89,9 +89,9 @@ const SpriteSelectorItem = props => (

 SpriteSelectorItem.propTypes = {
    className: PropTypes.string,
+    componentRef: PropTypes.func,
    costumeURL: PropTypes.string,
    details: PropTypes.string,
-    dragging: PropTypes.bool,
    name: PropTypes.string.isRequired,
    number: PropTypes.number,
    onClick: PropTypes.func,
@@ -101,6 +101,7 @@ SpriteSelectorItem.propTypes = {
    onMouseDown: PropTypes.func,
    onMouseEnter: PropTypes.func,
    onMouseLeave: PropTypes.func,
+    preventContextMenu: PropTypes.bool,
    selected: PropTypes.bool.isRequired
 };

@@ -110,7 +110,8 @@ SpriteList.propTypes = {
    editingTarget: PropTypes.string,
    hoveredTarget: PropTypes.shape({
        hoveredSprite: PropTypes.string,
-        receivedBlocks: PropTypes.bool
+        receivedBlocks: PropTypes.bool,
+        sprite: PropTypes.string
    }),
    items: PropTypes.arrayOf(PropTypes.shape({
        costume: PropTypes.shape({
@@ -68,6 +68,8 @@
    padding-left: calc($space / 2);
    padding-right: calc($space / 2);
    padding-bottom: $space;
+
+    overflow-x: hidden;
 }

 .add-button {
@@ -1,5 +1,6 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";

 .stage-wrapper * {
    box-sizing: border-box;
@@ -9,3 +10,21 @@
    /* Hides negative space between edge of rounded corners + container, when selected */
    user-select: none;
 }
+
+.stage-wrapper.full-screen {
+    position: fixed;
+    top: $stage-menu-height;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $z-index-stage-wrapper-overlay;
+    background-color: $ui-white;
+    /* spacing between stage and control bar (on the top), or between
+    stage and window edges (on left/right/bottom) */
+    padding: $stage-full-screen-stage-padding;
+
+    /* this centers the stage */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import VM from 'scratch-vm';

 import Box from '../box/box.jsx';
@@ -22,7 +23,10 @@ const StageWrapperComponent = function (props) {

    return (
        <Box
-            className={styles.stageWrapper}
+            className={classNames(
+                styles.stageWrapper,
+                {[styles.fullScreen]: isFullScreen}
+            )}
            dir={isRtl ? 'rtl' : 'ltr'}
        >
            <Box className={styles.stageMenuWrapper}>
@@ -21,6 +21,13 @@

    /* Make sure border is not included in size calculation */
    box-sizing: content-box !important;
+
+    /* enforce overflow + reset position of absolutely-positioned children */
+    position: relative;
+}
+
+.stage.full-screen {
+    border: $stage-full-screen-border-width solid rgb(126, 133, 151);
 }

 .with-color-picker {
@@ -43,63 +50,30 @@
    position: relative;
 }

-.stage-wrapper-overlay {
-    position: fixed;
-    top: $stage-menu-height;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: $z-index-stage-wrapper-overlay;
-    background-color: $ui-white;
-    /* spacing between stage and control bar (on the top), or between
-    stage and window edges (on left/right/bottom) */
-    padding: $stage-full-screen-stage-padding;
-}
-
-/* wraps only main content of overlay player, not monitors */
-.stage-overlay-content {
-    outline: none;
-    margin: auto;
-    border: $stage-full-screen-border-width solid rgb(126, 133, 151);
-    padding: 0;
-    border-radius: $space;
-
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.stage-overlay-content-border-override {
-    border: none;
-}
-
-/* adjust monitors when stage is standard size:
-shift them down and right to compensate for the stage's border */
-.stage-wrapper .monitor-wrapper {
+/* we want stage overlays to all be positioned in the same spot as the stage, but can't put them inside the border
+because we want their overflow to be visible, and the bordered element must have overflow: hidden set so that the
+stage doesn't "spill" out from under its rounded corners. instead, shift these over by the border width. */
+.stage-overlays {
+    position: absolute;
    top: $stage-standard-border-width;
    left: $stage-standard-border-width;
+
+    /* the overlay itself should not capture pointer events; only its child elements can do that */
+    pointer-events: none;
 }

-/* adjust monitors when stage is full screen:
-.stage-wrapper-overlay uses position: fixed instead of relative, so we need
-to adjust for the border using a different method */
-.stage-wrapper-overlay .monitor-wrapper {
-    padding-top: calc($stage-full-screen-stage-padding + $stage-full-screen-border-width);
-    padding-bottom: calc($stage-full-screen-stage-padding + $stage-full-screen-border-width);
+.stage-overlays.full-screen {
+    top: $stage-full-screen-border-width;
+    left: $stage-full-screen-border-width;
 }

 .monitor-wrapper,
-.color-picker-wrapper,
 .frame-wrapper,
 .green-flag-overlay-wrapper {
    position: absolute;
    top: 0;
    left: 0;
-    width: 100%;
-    height: 100%;
    pointer-events: none;
-    overflow: hidden;
 }

 .dragging-sprite {
@@ -108,7 +82,7 @@ to adjust for the border using a different method */
    left: 0;
    z-index: $z-index-dragging-sprite;
    filter: drop-shadow(5px 5px 5px $ui-black-transparent);
- }
+}

 .stage-bottom-wrapper {
    position: absolute;
@@ -116,6 +90,7 @@ to adjust for the border using a different method */
    flex-direction: column;
    justify-content: flex-end;
    top: 0;
+    left: 0;
    overflow: hidden;
    pointer-events: none;
 }
@@ -133,7 +108,6 @@ to adjust for the border using a different method */
 }

 .frame {
-    box-sizing: content-box !important;
    background: $motion-transparent;
    border: 2px solid $motion-primary;
    border-radius: 0.5rem;
@@ -143,6 +117,8 @@ to adjust for the border using a different method */
 }

 .green-flag-overlay-wrapper {
+    width: 100%;
+    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
@@ -35,23 +35,17 @@ const StageComponent = props => {
    const stageDimensions = getStageDimensions(stageSize, isFullScreen);

    return (
-        <div>
+        <React.Fragment>
            <Box
-                className={classNames({
-                    [styles.stageWrapper]: !isFullScreen,
-                    [styles.stageWrapperOverlay]: isFullScreen,
-                    [styles.withColorPicker]: !isFullScreen && isColorPicking
-                })}
-                style={{
-                    minHeight: stageDimensions.height,
-                    minWidth: stageDimensions.width
-                }}
+                className={classNames(
+                    styles.stageWrapper,
+                    {[styles.withColorPicker]: !isFullScreen && isColorPicking})}
                onDoubleClick={onDoubleClick}
            >
                <Box
                    className={classNames(
                        styles.stage,
-                        {[styles.stageOverlayContent]: isFullScreen}
+                        {[styles.fullScreen]: isFullScreen}
                    )}
                    style={{
                        height: stageDimensions.height,
@@ -66,18 +60,61 @@ const StageComponent = props => {
                        }}
                        {...boxProps}
                    />
+                    <Box className={styles.monitorWrapper}>
+                        <MonitorList
+                            draggable={useEditorDragStyle}
+                            stageSize={stageDimensions}
+                        />
+                    </Box>
+                    <Box className={styles.frameWrapper}>
+                        <TargetHighlight
+                            className={styles.frame}
+                            stageHeight={stageDimensions.height}
+                            stageWidth={stageDimensions.width}
+                        />
+                    </Box>
+                    {isColorPicking && colorInfo ? (
+                        <Loupe colorInfo={colorInfo} />
+                    ) : null}
                </Box>
-                <Box className={styles.monitorWrapper}>
-                    <MonitorList
-                        draggable={useEditorDragStyle}
-                        stageSize={stageDimensions}
-                    />
-                </Box>
-                <Box className={styles.frameWrapper}>
-                    <TargetHighlight
-                        className={styles.frame}
-                        stageHeight={stageDimensions.height}
-                        stageWidth={stageDimensions.width}
+
+                {/* `stageOverlays` is for items that should *not* have their overflow contained within the stage */}
+                <Box
+                    className={classNames(
+                        styles.stageOverlays,
+                        {[styles.fullScreen]: isFullScreen}
+                    )}
+                >
+                    <div
+                        className={styles.stageBottomWrapper}
+                        style={{
+                            width: stageDimensions.width,
+                            height: stageDimensions.height
+                        }}
+                    >
+                        {micIndicator ? (
+                            <MicIndicator
+                                className={styles.micIndicator}
+                                stageSize={stageDimensions}
+                            />
+                        ) : null}
+                        {question === null ? null : (
+                            <div
+                                className={styles.questionWrapper}
+                                style={{width: stageDimensions.width}}
+                            >
+                                <Question
+                                    question={question}
+                                    onQuestionAnswered={onQuestionAnswered}
+                                />
+                            </div>
+                        )}
+                    </div>
+                    <canvas
+                        className={styles.draggingSprite}
+                        height={0}
+                        ref={dragRef}
+                        width={0}
                    />
                </Box>
                {isStarted ? null : (
@@ -86,44 +123,6 @@ const StageComponent = props => {
                        wrapperClass={styles.greenFlagOverlayWrapper}
                    />
                )}
-                {isColorPicking && colorInfo ? (
-                    <Box className={styles.colorPickerWrapper}>
-                        <Loupe colorInfo={colorInfo} />
-                    </Box>
-                ) : null}
-                <div
-                    className={styles.stageBottomWrapper}
-                    style={{
-                        width: stageDimensions.width,
-                        height: stageDimensions.height,
-                        left: '50%',
-                        marginLeft: stageDimensions.width * -0.5
-                    }}
-                >
-                    {micIndicator ? (
-                        <MicIndicator
-                            className={styles.micIndicator}
-                            stageSize={stageDimensions}
-                        />
-                    ) : null}
-                    {question === null ? null : (
-                        <div
-                            className={styles.questionWrapper}
-                            style={{width: stageDimensions.width}}
-                        >
-                            <Question
-                                question={question}
-                                onQuestionAnswered={onQuestionAnswered}
-                            />
-                        </div>
-                    )}
-                </div>
-                <canvas
-                    className={styles.draggingSprite}
-                    height={0}
-                    ref={dragRef}
-                    width={0}
-                />
            </Box>
            {isColorPicking ? (
                <Box
@@ -131,7 +130,7 @@ const StageComponent = props => {
                    onClick={onDeactivateColorPicker}
                />
            ) : null}
-        </div>
+        </React.Fragment>
    );
 };
 StageComponent.propTypes = {
@@ -101,6 +101,9 @@ class TelemetryModal extends React.PureComponent {
                            privacyPolicyLink: (<a
                                className={styles.privacyPolicyLink}
                                href="https://scratch.mit.edu/privacy_policy/"
+                                onClick={this.props.onShowPrivacyPolicy}
+                                target="_blank"
+                                rel="noopener noreferrer"
                            >
                                <FormattedMessage {...messages.privacyPolicyLink} />
                            </a>)
@@ -134,7 +137,8 @@ TelemetryModal.propTypes = {
    onCancel: PropTypes.func,
    onOptIn: PropTypes.func.isRequired,
    onOptOut: PropTypes.func.isRequired,
-    onRequestClose: PropTypes.func
+    onRequestClose: PropTypes.func,
+    onShowPrivacyPolicy: PropTypes.func
 };

 export default injectIntl(TelemetryModal);
@@ -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}
@@ -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;
@@ -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;
@@ -67,7 +67,7 @@ class AutoScanningStep extends React.Component {
    render () {
        return (
            <ScanningStepComponent
-                peripheralButtonImage={this.props.peripheralButtonImage}
+                connectionTipIconURL={this.props.connectionTipIconURL}
                phase={this.state.phase}
                title={this.props.extensionId}
                onRefresh={this.handleRefresh}
@@ -78,9 +78,9 @@ class AutoScanningStep extends React.Component {
 }

 AutoScanningStep.propTypes = {
+    connectionTipIconURL: PropTypes.string,
    extensionId: PropTypes.string.isRequired,
    onConnecting: PropTypes.func.isRequired,
-    peripheralButtonImage: PropTypes.string,
    vm: PropTypes.instanceOf(VM).isRequired
 };

@@ -2,10 +2,8 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
-import {connect} from 'react-redux';
 import VM from 'scratch-vm';

-import analytics from '../lib/analytics';
 import backdropLibraryContent from '../lib/libraries/backdrops.json';
 import backdropTags from '../lib/libraries/backdrop-tags';
 import LibraryComponent from '../components/library/library.jsx';
@@ -34,13 +32,8 @@ class BackdropLibrary extends React.Component {
            bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
            skinId: null
        };
-        this.props.vm.setEditingTarget(this.props.stageID);
+        // Do not switch to stage, just add the backdrop
        this.props.vm.addBackdrop(item.md5, vmBackdrop);
-        analytics.event({
-            category: 'library',
-            action: 'Select Backdrop',
-            label: item.name
-        });
    }
    render () {
        return (
@@ -59,17 +52,7 @@ class BackdropLibrary extends React.Component {
 BackdropLibrary.propTypes = {
    intl: intlShape.isRequired,
    onRequestClose: PropTypes.func,
-    stageID: PropTypes.string.isRequired,
    vm: PropTypes.instanceOf(VM).isRequired
 };

-const mapStateToProps = state => ({
-    stageID: state.scratchGui.targets.stage.id
-});
-
-const mapDispatchToProps = () => ({});
-
-export default injectIntl(connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(BackdropLibrary));
+export default injectIntl(BackdropLibrary);
@@ -83,12 +83,15 @@ class Backpack extends React.Component {
    }
    handleDrop (dragInfo) {
        let payloader = null;
+        let presaveAsset = null;
        switch (dragInfo.dragType) {
        case DragConstants.COSTUME:
            payloader = costumePayload;
+            presaveAsset = dragInfo.payload.asset;
            break;
        case DragConstants.SOUND:
            payloader = soundPayload;
+            presaveAsset = dragInfo.payload.asset;
            break;
        case DragConstants.SPRITE:
            payloader = spritePayload;
@@ -102,6 +105,19 @@ class Backpack extends React.Component {
        // Creating the payload is async, so set loading before starting
        this.setState({loading: true}, () => {
            payloader(dragInfo.payload, this.props.vm)
+                .then(payload => {
+                    // Force the asset to save to the asset server before storing in backpack
+                    // Ensures any asset present in the backpack is also on the asset server
+                    if (presaveAsset && !presaveAsset.clean) {
+                        return storage.store(
+                            presaveAsset.assetType,
+                            presaveAsset.dataFormat,
+                            presaveAsset.data,
+                            presaveAsset.assetId
+                        ).then(() => payload);
+                    }
+                    return payload;
+                })
                .then(payload => saveBackpackObject({
                    host: this.props.host,
                    token: this.props.token,
@@ -17,6 +17,7 @@ import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
 import {STAGE_DISPLAY_SIZES} from '../lib/layout-constants';
 import DropAreaHOC from '../lib/drop-area-hoc.jsx';
 import DragConstants from '../lib/drag-constants';
+import defineDynamicBlock from '../lib/define-dynamic-block';

 import {connect} from 'react-redux';
 import {updateToolbox} from '../reducers/toolbox';
@@ -96,6 +97,21 @@ class Blocks extends React.Component {
        );
        this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);

+        // Register buttons under new callback keys for creating variables,
+        // lists, and procedures from extensions.
+
+        const toolboxWorkspace = this.workspace.getFlyout().getWorkspace();
+
+        const varListButtonCallback = type =>
+            (() => this.ScratchBlocks.Variables.createVariable(this.workspace, null, type));
+        const procButtonCallback = () => {
+            this.ScratchBlocks.Procedures.createProcedureDefCallback_(this.workspace);
+        };
+
+        toolboxWorkspace.registerButtonCallback('MAKE_A_VARIABLE', varListButtonCallback(''));
+        toolboxWorkspace.registerButtonCallback('MAKE_A_LIST', varListButtonCallback('list'));
+        toolboxWorkspace.registerButtonCallback('MAKE_A_PROCEDURE', procButtonCallback);
+
        // Store the xml of the toolbox that is actually rendered.
        // This is used in componentDidUpdate instead of prevProps, because
        // the xml can change while e.g. on the costumes tab.
@@ -322,11 +338,11 @@ class Blocks extends React.Component {
            const stageCostumes = stage.getCostumes();
            const targetCostumes = target.getCostumes();
            const targetSounds = target.getSounds();
-            const dynamicBlocksXML = this.props.vm.runtime.getBlocksXML();
-            return makeToolboxXML(target.isStage, target.id, dynamicBlocksXML,
-                targetCostumes[0].name,
-                stageCostumes[0].name,
-                targetSounds.length > 0 ? targetSounds[0].name : ''
+            const dynamicBlocksXML = this.props.vm.runtime.getBlocksXML(target);
+            return makeToolboxXML(false, target.isStage, target.id, dynamicBlocksXML,
+                targetCostumes[targetCostumes.length - 1].name,
+                stageCostumes[stageCostumes.length - 1].name,
+                targetSounds.length > 0 ? targetSounds[targetSounds.length - 1].name : ''
            );
        } catch {
            return null;
@@ -378,20 +394,50 @@ class Blocks extends React.Component {
        // workspace to be 'undone' here.
        this.workspace.clearUndo();
    }
-    handleExtensionAdded (blocksInfo) {
-        // select JSON from each block info object then reject the pseudo-blocks which don't have JSON, like separators
-        // this actually defines blocks and MUST run regardless of the UI state
-        this.ScratchBlocks.defineBlocksWithJsonArray(blocksInfo.map(blockInfo => blockInfo.json).filter(x => x));
+    handleExtensionAdded (categoryInfo) {
+        const defineBlocks = blockInfoArray => {
+            if (blockInfoArray && blockInfoArray.length > 0) {
+                const staticBlocksJson = [];
+                const dynamicBlocksInfo = [];
+                blockInfoArray.forEach(blockInfo => {
+                    if (blockInfo.info && blockInfo.info.isDynamic) {
+                        dynamicBlocksInfo.push(blockInfo);
+                    } else if (blockInfo.json) {
+                        staticBlocksJson.push(blockInfo.json);
+                    }
+                    // otherwise it's a non-block entry such as '---'
+                });

-        // Update the toolbox with new blocks
+                this.ScratchBlocks.defineBlocksWithJsonArray(staticBlocksJson);
+                dynamicBlocksInfo.forEach(blockInfo => {
+                    // This is creating the block factory / constructor -- NOT a specific instance of the block.
+                    // The factory should only know static info about the block: the category info and the opcode.
+                    // Anything else will be picked up from the XML attached to the block instance.
+                    const extendedOpcode = `${categoryInfo.id}_${blockInfo.info.opcode}`;
+                    const blockDefinition =
+                        defineDynamicBlock(this.ScratchBlocks, categoryInfo, blockInfo, extendedOpcode);
+                    this.ScratchBlocks.Blocks[extendedOpcode] = blockDefinition;
+                });
+            }
+        };
+
+        // scratch-blocks implements a menu or custom field as a special kind of block ("shadow" block)
+        // these actually define blocks and MUST run regardless of the UI state
+        defineBlocks(
+            Object.getOwnPropertyNames(categoryInfo.customFieldTypes)
+                .map(fieldTypeName => categoryInfo.customFieldTypes[fieldTypeName].scratchBlocksDefinition));
+        defineBlocks(categoryInfo.menus);
+        defineBlocks(categoryInfo.blocks);
+
+        // Update the toolbox with new blocks if possible
        const toolboxXML = this.getToolboxXML();
        if (toolboxXML) {
            this.props.updateToolboxState(toolboxXML);
        }
    }
-    handleBlocksInfoUpdate (blocksInfo) {
+    handleBlocksInfoUpdate (categoryInfo) {
        // @todo Later we should replace this to avoid all the warnings from redefining blocks.
-        this.handleExtensionAdded(blocksInfo);
+        this.handleExtensionAdded(categoryInfo);
    }
    handleCategorySelected (categoryId) {
        const extension = extensionData.find(ext => ext.extensionId === categoryId);
@@ -5,6 +5,7 @@ import React from 'react';
 import {
    activateDeck,
    closeCards,
+    shrinkExpandCards,
    nextStep,
    prevStep,
    dragCard,
@@ -18,6 +19,7 @@ import {

 import CardsComponent from '../components/cards/cards.jsx';
 import {loadImageData} from '../lib/libraries/decks/translate-image.js';
+import {notScratchDesktop} from '../lib/isScratchDesktop';

 class Cards extends React.Component {
    componentDidMount () {
@@ -46,11 +48,13 @@ const mapStateToProps = state => ({
    content: state.scratchGui.cards.content,
    activeDeckId: state.scratchGui.cards.activeDeckId,
    step: state.scratchGui.cards.step,
+    expanded: state.scratchGui.cards.expanded,
    x: state.scratchGui.cards.x,
    y: state.scratchGui.cards.y,
    isRtl: state.locales.isRtl,
    locale: state.locales.locale,
-    dragging: state.scratchGui.cards.dragging
+    dragging: state.scratchGui.cards.dragging,
+    showVideos: notScratchDesktop()
 });

 const mapDispatchToProps = dispatch => ({
@@ -60,6 +64,7 @@ const mapDispatchToProps = dispatch => ({
        dispatch(closeCards());
    },
    onCloseCards: () => dispatch(closeCards()),
+    onShrinkExpandCards: () => dispatch(shrinkExpandCards()),
    onNextStep: () => dispatch(nextStep()),
    onPrevStep: () => dispatch(prevStep()),
    onDrag: (e_, data) => dispatch(dragCard(data.x, data.y)),
				`@@ -0,0 +1 @@`
				<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M10 2c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm-.072 10.42c-.256 0-.472.076-.648.227-.176.151-.264.338-.264.56 0 .25.091.445.273.584.182.139.395.209.639.209.236 0 .444-.07.624-.211s.27-.335.27-.581c0-.222-.086-.409-.258-.56-.172-.151-.384-.227-.636-.227zm.144-6.42c-.624 0-1.17.113-1.638.338-.468.225-.824.51-1.068.853-.244.343-.366.683-.366 1.017 0 .162.077.313.231.452.154.139.343.209.567.209.38 0 .638-.199.774-.597.144-.38.32-.668.528-.864.208-.196.532-.293.972-.293.376 0 .683.097.921.291.238.194.357.432.357.713 0 .144-.039.278-.117.402-.078.123-.174.235-.288.336-.114.1-.299.249-.555.446-.292.225-.524.42-.696.584-.172.164-.31.354-.414.571-.104.217-.156.473-.156.769 0 .236.071.414.213.534.142.12.317.18.525.18.4 0 .638-.183.714-.55l.099-.362.093-.206.183-.227.327-.288c.492-.387.833-.663 1.023-.827.19-.164.354-.358.492-.584.138-.225.207-.488.207-.787 0-.38-.121-.733-.363-1.057-.242-.324-.585-.58-1.029-.769-.444-.188-.956-.283-1.536-.283z" id="a"/></defs><g transform="translate(-2 -2)" fill="none"><mask><use xlink:href="#a"/></mask><use fill="#fff" xlink:href="#a"/></g></svg>