From 60b3f723fd0623215e21556f4069705dcee86420 Mon Sep 17 00:00:00 2001
From: Alexander Heimbuch <github@heimbu.ch>
Date: Sat, 29 Apr 2017 12:52:49 +0200
Subject: [PATCH] feat(share-tab): Adapt sharing UI, buttons for volume slider

---
 package.json                              |  24 ++---
 src/components/shared/Button.vue          |   2 +-
 src/components/tabs/settings/Settings.vue |  72 +++++--------
 src/components/tabs/share/Share.vue       | 120 ++++++++++------------
 src/store/reducers/player.js              |   8 +-
 src/store/reducers/theme.js               |  14 +--
 src/styles/_grid.scss                     |   2 +-
 src/styles/_inputs.scss                   |   6 ++
 src/styles/_range-resets.scss             |  42 +++++---
 src/styles/_utils.scss                    |   8 ++
 src/webpack.config.js                     |  17 ++-
 yarn.lock                                 |  55 ++++++----
 12 files changed, 189 insertions(+), 181 deletions(-)
 create mode 100644 src/styles/_inputs.scss

diff --git a/package.json b/package.json
index 7081987d3..efe1ac9a3 100644
--- a/package.json
+++ b/package.json
@@ -42,18 +42,18 @@
     "deploy:surge": "surge --project ./dist --domain podlove-player.surge.sh"
   },
   "dependencies": {
-    "bluebird": "^3.5.0",
+    "bluebird": "3.5.0",
     "clipboard": "1.6.0",
     "color": "1.0.3",
     "detect-browser": "1.6.2",
-    "foundation-sites": "^6.3.1",
+    "foundation-sites": "6.3.1",
     "hashcode": "1.0.3",
     "howler": "2.0.3",
     "iframe-resizer": "3.5.7",
     "keyboardjs": "2.3.3",
     "lodash": "4.17.4",
-    "mobile-detect": "^1.3.6",
-    "normalize.css": "^6.0.0",
+    "mobile-detect": "1.3.6",
+    "normalize.css": "6.0.0",
     "query-string": "4.3.1",
     "redux": "3.5.2",
     "revue": "3.0.0",
@@ -64,36 +64,36 @@
     "ava": "0.18.2",
     "babel-core": "6.22.0",
     "babel-loader": "7.0.0",
-    "babel-plugin-lodash": "^3.2.11",
+    "babel-plugin-lodash": "3.2.11",
     "babel-plugin-transform-runtime": "6.22.0",
     "babel-plugin-webpack-alias": "2.1.2",
-    "babel-preset-bluebird": "^1.0.1",
+    "babel-preset-bluebird": "1.0.1",
     "babel-preset-es2015": "6.22.0",
     "babel-preset-stage-2": "6.22.0",
     "babel-register": "6.22.0",
     "browser-env": "2.0.25",
-    "compression-webpack-plugin": "^0.4.0",
+    "compression-webpack-plugin": "0.4.0",
     "cross-env": "3.0.0",
     "css-loader": "0.25.0",
-    "file-loader": "^0.11.1",
+    "file-loader": "0.11.1",
     "html-webpack-plugin": "2.26.0",
     "inject-loader": "3.0.0-beta4",
-    "inline-environment-variables-webpack-plugin": "^1.2.0",
+    "inline-environment-variables-webpack-plugin": "1.2.0",
     "lolex": "1.6.0",
     "node-sass": "4.1.1",
     "nyc": "10.1.2",
     "raw-loader": "0.5.1",
     "sass-loader": "4.1.1",
-    "semver": "^5.3.0",
+    "semver": "5.3.0",
     "sinon": "2.1.0",
     "surge": "0.18.0",
     "transform-runtime": "0.0.0",
     "vue-loader": "11.3.4",
     "vue-template-compiler": "2.2.6",
     "webpack": "2.3.2",
-    "webpack-bundle-analyzer": "^2.4.0",
+    "webpack-bundle-analyzer": "2.4.0",
     "webpack-dashboard": "0.3.0",
-    "webpack-dev-server": "2.1.0-beta.9"
+    "webpack-dev-server": "2.4.5"
   },
   "engines": {
     "node": ">=5.0.0"
diff --git a/src/components/shared/Button.vue b/src/components/shared/Button.vue
index a3b06c8b7..045e81bef 100644
--- a/src/components/shared/Button.vue
+++ b/src/components/shared/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :style="buttonStyle(color)" class="podlove-player--button" @click="click()"><slot></slot></button>
+  <button :style="buttonStyle(color)" class="podlove-player--button" @click="click && click()"><slot></slot></button>
 </template>
 
 <script>
diff --git a/src/components/tabs/settings/Settings.vue b/src/components/tabs/settings/Settings.vue
index c66632421..8673d502a 100644
--- a/src/components/tabs/settings/Settings.vue
+++ b/src/components/tabs/settings/Settings.vue
@@ -5,17 +5,21 @@
         <span class="title">Volume</span>
         <span class="volume">{{decimalToPercent(volume)}}%</span>
       </h4>
-      <PodloveSlider min="0" max="1" :value="volume" step="0.001" :onInput="setVolume" :thumbColor="theme.settings.slider.thumb"></PodloveSlider>
+      <div class="input-slider">
+        <PodloveButton class="slider-button" :click="changeVolume(volume, -5)" :style="buttonStyle(theme)">-</PodloveButton>
+        <PodloveButton class="slider-button" :click="changeVolume(volume, 5)" :style="buttonStyle(theme)">+</PodloveButton>
+        <PodloveSlider class="input-slider" min="0" max="1" :value="volume" step="0.001" :onInput="setVolume" :thumbColor="theme.tabs.slider.thumb"></PodloveSlider>
+      </div>
     </div>
     <div class="input">
       <h4 class="label">
         <span class="title">Speed</span>
         <span class="rate">{{decimalToPercent(rate)}}%</span>
       </h4>
-      <div class="input--rate">
-        <PodloveButton class="rate-button" :click="decreaseRate(rate)" :style="buttonStyle(theme)">-</PodloveButton>
-        <PodloveButton class="rate-button" :click="increaseRate(rate)" :style="buttonStyle(theme)">+</PodloveButton>
-        <PodloveSlider class="rate--slider" min="0.5" max="4" :value="rate" step="0.001" :onInput="setRate" :thumbColor="theme.settings.slider.thumb"></PodloveSlider>
+      <div class="input-slider">
+        <PodloveButton class="slider-button" :click="changeRate(rate, -5)" :style="buttonStyle(theme)">-</PodloveButton>
+        <PodloveButton class="slider-button" :click="changeRate(rate, 5)" :style="buttonStyle(theme)">+</PodloveButton>
+        <PodloveSlider class="input-slider" min="0.5" max="4" :value="rate" step="0.001" :onInput="setRate" :thumbColor="theme.tabs.slider.thumb"></PodloveSlider>
       </div>
     </div>
     <div class="footer">
@@ -39,8 +43,8 @@
   }
 
   const buttonStyle = (theme) => ({
-    color: theme.settings.slider.text,
-    background: theme.settings.slider.button
+    color: theme.tabs.button.text,
+    background: theme.tabs.button.background
   })
 
   const setVolume = volume => {
@@ -52,45 +56,19 @@
   }
 
   const roundUp = (base, number) => {
-    if (number % base == 0) {
+    if (number % base === 0) {
       return number + base
     }
 
     return number + (base - number % base)
   }
 
-  const increaseRate = (rate) => {
-    let reference = Date.now()
-
-    rate = decimalToPercent(rate)
-    return () => {
-      let now = Date.now()
-
-      if ((now - reference) < 500) {
-        store.dispatch(store.actions.setRate(roundUp(10, rate) / 100))
-      } else {
-        store.dispatch(store.actions.setRate(roundUp(5, rate) / 100))
-      }
-
-      reference = now
-    }
+  const changeRate = (rate, offset) => () => {
+    store.dispatch(store.actions.setRate(roundUp(offset, (rate * 100)) / 100))
   }
 
-  const decreaseRate = (rate) => {
-    let reference = Date.now()
-
-    rate = decimalToPercent(rate)
-    return () => {
-      let now = Date.now()
-
-      if ((now - reference) < 500) {
-        store.dispatch(store.actions.setRate(roundUp(-10, rate) / 100))
-      } else {
-        store.dispatch(store.actions.setRate(roundUp(-5, rate) / 100))
-      }
-
-      reference = now
-    }
+  const changeVolume = (volume, offset) => () => {
+    store.dispatch(store.actions.setVolume(roundUp(offset, (volume * 100)) / 100))
   }
 
   export default {
@@ -98,7 +76,7 @@
       return {
         volume: this.$select('volume'),
         rate: this.$select('rate'),
-        version: this.$select('debug.version'),
+        version: this.$select('runtime.version'),
         theme: this.$select('theme')
       }
     },
@@ -106,8 +84,8 @@
       exportStore,
       setVolume,
       setRate,
-      increaseRate,
-      decreaseRate,
+      changeRate,
+      changeVolume,
       buttonStyle,
       decimalToPercent
     },
@@ -120,6 +98,7 @@
 
 <style lang="scss">
   @import 'variables';
+  @import 'inputs';
 
   $preset-width: 40px;
   $button-size: 30px;
@@ -135,11 +114,6 @@
       color: rgba($accent-color, 0.25)
     }
 
-    .input {
-      border-bottom: 1px dashed rgba($accent-color, 0.2);
-      padding-bottom: $padding * 2;
-    }
-
     .footer {
       margin-top: $margin;
       text-align: right;
@@ -159,17 +133,17 @@
       width: $preset-width;
     }
 
-    .input--rate {
+    .input-slider {
       display: flex;
       align-items: center;
     }
 
-    .rate--slider {
+    .input-slider {
       width: 100%;
       margin-left: $margin / 2;
     }
 
-    .rate-button {
+    .slider-button {
       font-weight: bold;
       font-size: 1.2em;
       height: $button-size;
diff --git a/src/components/tabs/share/Share.vue b/src/components/tabs/share/Share.vue
index 75c26dbbf..0b74985c2 100644
--- a/src/components/tabs/share/Share.vue
+++ b/src/components/tabs/share/Share.vue
@@ -1,20 +1,25 @@
 <template>
   <div class="podlove-share">
     <div class="embed">
-      <h4 class="embed--title">Embed</h4>
-      <div class="embed--dialog">
-        <input type="text" class="embed--input embed--copy" disabled :value="clipboardContent(reference, share, playtime)" />
-        <button class="embed--copy-button" :data-clipboard-text="clipboardContent(reference, share, playtime)" v-clipboard v-on:click="openCopiedTooltip">copy</button>
+      <h4 class="title">Embed</h4>
+      <div class="input-row">
+        <input type="text" class="share-input share-copy" disabled :value="clipboardContent(reference, share, playtime)" />
+        <PodloveButton
+          class="share-copy-button"
+          :data-clipboard-text="clipboardContent(reference, share, playtime)"
+          v-clipboard
+          :style="buttonStyle(theme)">
+            copy
+        </PodloveButton>
       </div>
-      <div class="embed--config">
-        <div class="embed--config--time">
-          <input type="checkbox" class="embed--checkbox" :value="share.customStart" v-on:change="toggleCustomStart()" />
-          <label class="embed--label">Start um:</label>
-          <input type="text" class="embed--input" :value="secondsToTime(share.customStarttime)" v-on:input="setCustomStarttime"/>
+      <div class="input-row">
+        <div class="share-config--time">
+          <label class="input-label"><input type="checkbox" class="embed--checkbox" :value="share.customStart" v-on:change="toggleCustomStart(playtime)" /> Start:</label>
+          <input type="text" class="share-input" :value="secondsToTime(share.customStarttime)" v-on:input="setCustomStarttime"/>
         </div>
-        <div class="embed--config--size">
-          <label class="embed--label">Playergröße:</label>
-          <select class="embed--input" v-model="share.dimensions" v-on:change="setDimensions(share.dimensions)">
+        <div class="share-config--size">
+          <label class="input-label">Size:</label>
+          <select class="share-input" v-model="share.dimensions" v-on:change="setDimensions(share.dimensions)">
             <option v-for="option in sizeOptions" v-bind:value="option">
               {{ option }}
             </option>
@@ -27,6 +32,7 @@
 
 <script>
   import {debounce, get} from 'lodash'
+  import PodloveButton from 'shared/Button.vue'
 
   import store from 'store'
   import {secondsToTime, timeToSeconds} from 'utils/time'
@@ -43,13 +49,9 @@
     store.dispatch(store.actions.setEmbedDimensions(dimensions))
   }
 
-  const toggleCustomStart = () => {
+  const toggleCustomStart = (time) => {
     store.dispatch(store.actions.toggleShareCustomStart())
-  }
-
-  const openCopiedTooltip = (tooltipOpen) => {
-    tooltipOpen = !tooltipOpen
-    return tooltipOpen
+    store.dispatch(store.actions.setCustomStarttime(time))
   }
 
   const setCustomStarttime = debounce(input => {
@@ -67,6 +69,11 @@
     store.dispatch(store.actions.setCustomStarttime(time))
   }, 1000)
 
+  const buttonStyle = (theme) => ({
+    color: theme.tabs.button.text,
+    background: theme.tabs.button.background
+  })
+
   export default {
     data() {
       return {
@@ -75,7 +82,7 @@
         playtime: this.$select('playtime'),
         duration: this.$select('duration'),
         sizeOptions: ['250x400', '320x400', '375x400', '600x290', '768x290'],
-        tooltipOpen: false
+        theme: this.$select('theme')
       }
     },
     methods: {
@@ -84,7 +91,10 @@
       secondsToTime,
       toggleCustomStart,
       setCustomStarttime,
-      openCopiedTooltip
+      buttonStyle
+    },
+    components: {
+      PodloveButton
     }
   }
 
@@ -92,6 +102,8 @@
 
 <style lang="scss">
   @import 'variables';
+  @import 'utils';
+  @import 'inputs';
 
   $embed-width: 40px;
   $embed-height: 35px;
@@ -100,33 +112,25 @@
   .podlove-share {
     padding: $padding;
 
-    .embed--title {
-      color: $overlay-color;
-      padding-bottom: 0;
-      margin-bottom: $margin / 2;
-    }
-
-    .embed--input {
+    .share-input {
       display: inline-block;
       resize: none;
       padding: $padding / 4;
-      font-size: 0.8rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      border: 1px solid $overlay-color;
+      border-color: rgba($accent-color, 0.8);
+      border-width: 1px;
       border-radius: 2px;
-      height: 100%;
     }
 
-    .embed--copy {
+    .share-copy {
       padding: $padding / 2;
       width: calc(100% - #{$embed-width});
       border-radius: 2px 0 0 2px;
-      font-size: 1rem;
+      font-size: 1em;
+      border-width: 1px 0 1px 1px;
       height: $embed-height;
     }
 
-    .embed--copy-button {
+    .share-copy-button {
       cursor: pointer;
 
       display: flex;
@@ -135,11 +139,7 @@
 
       height: $embed-height;
       width: $embed-width;
-      background: $overlay-color;
-      color: $background-color;
-      border-color: $overlay-color;
-      border-width: 1px 1px 1px 0;
-      border-radius: 0 2px 2px 0;
+      border: 1px solid rgba($accent-color, 0.8);
 
       opacity: 1;
 
@@ -148,39 +148,25 @@
       }
     }
 
-    .embed--dialog {
-      display: flex;
-      margin-bottom: $margin / 2;
+    .share-config--time, .share-config--size {
+      line-height: 1em;
     }
 
-    .embed--config {
+    .input-row {
       display: flex;
+      justify-content: space-between;
       margin-bottom: $margin / 2;
+    }
 
-      .embed--config--time {
-        display: flex;
-        align-items: flex-start;
-        justify-content: flex-start;
-        width: 50%;
-      }
-
-      .embed--config--size {
-        display: flex;
-        align-items: flex-end;
-        justify-content: flex-end;
-        width: 50%;
-      }
-
-      .embed--checkbox {
-        display: inline-block;
-        margin: ($margin / 2) ($margin / 2) 0 ($margin / 2);
-      }
+    .input-label {
+      margin-bottom: $margin / 4;
+    }
 
-      .embed--label {
-        display: inline-block;
-        font-size: 0.8rem;
-        margin-right: $margin / 3;
-        padding: ($padding / 4) 0;
+    @media screen and (max-width: $width-m) {
+      .share-config--time, .share-config--size {
+        .input-label {
+          display: block;
+        }
       }
     }
   }
diff --git a/src/store/reducers/player.js b/src/store/reducers/player.js
index a7311e5aa..926da7ed1 100644
--- a/src/store/reducers/player.js
+++ b/src/store/reducers/player.js
@@ -86,13 +86,15 @@ const rate = (state = 1, action) => {
     return state
   }
 
+  const rate = parseFloat(action.payload, 10)
+
   switch (true) {
-    case action.payload < 0.5:
+    case rate < 0.5:
       return 0.5
-    case action.payload > 4:
+    case rate > 4:
       return 4
     default:
-      return action.payload
+      return rate
   }
 }
 
diff --git a/src/store/reducers/theme.js b/src/store/reducers/theme.js
index 7ae54fc7a..e98cf62a9 100644
--- a/src/store/reducers/theme.js
+++ b/src/store/reducers/theme.js
@@ -32,13 +32,6 @@ const themeColors = (colors = {}) => {
         chapter: secondary ? secondary : negative ? light : dark
       }
     },
-    settings: {
-      slider: {
-        thumb: primary,
-        button: color(primary).fade(0.8),
-        text: primary
-      }
-    },
     tabs: {
       header: {
         background: primary,
@@ -52,6 +45,13 @@ const themeColors = (colors = {}) => {
         text: grey,
         textActive: negative ? primary : dark,
         progress: secondary ? secondary : negative ? primary : dark
+      },
+      slider: {
+        thumb: primary
+      },
+      button: {
+        background: color(primary).fade(0.8),
+        text: primary
       }
     },
     overlay: {
diff --git a/src/styles/_grid.scss b/src/styles/_grid.scss
index f78e388bf..992043317 100644
--- a/src/styles/_grid.scss
+++ b/src/styles/_grid.scss
@@ -22,4 +22,4 @@ $grid-row-width: 100%;
 // Bugfix for https://github.com/zurb/foundation-sites/issues/8304
 .row .row {
   max-width: none;
-}
\ No newline at end of file
+}
diff --git a/src/styles/_inputs.scss b/src/styles/_inputs.scss
new file mode 100644
index 000000000..49fddc2a9
--- /dev/null
+++ b/src/styles/_inputs.scss
@@ -0,0 +1,6 @@
+@import 'variables';
+
+.input {
+  border-bottom: 1px dashed rgba($accent-color, 0.2);
+  padding-bottom: $padding * 2;
+}
diff --git a/src/styles/_range-resets.scss b/src/styles/_range-resets.scss
index ddf324f27..9c6ba4e80 100644
--- a/src/styles/_range-resets.scss
+++ b/src/styles/_range-resets.scss
@@ -1,10 +1,14 @@
+$range-input-height: 44px;
+$thumb-width-desktop: 8px;
+$thumb-width-mobile: 44px;
+
 // Input Range Resets
 input[type=range]::-ms-track {
   width: 100%;
   height: 100%;
   -webkit-appearance: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   border: 0 none;
   background: transparent;
   color: transparent;
@@ -15,8 +19,8 @@ input[type=range]::-moz-range-track {
   width: 100%;
   height: 100%;
   -moz-appearance: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   border: 0 none;
   background: transparent;
   color: transparent;
@@ -25,10 +29,10 @@ input[type=range]::-moz-range-track {
 
 input[type=range] {
   width: 100%;
-  height: 44px;
+  height: $range-input-height;
   -webkit-appearance: none;
   position: absolute;
-  padding: 0px;
+  padding: 0;
   border: 0 none;
   color: transparent;
   overflow: visible;
@@ -46,8 +50,8 @@ input[type=range]:focus {
 
 /* Make the thumbs the same size as your custom sliderthumb. They will not be visible but they will be draggable. */
 input[type=range]::-ms-thumb {
-  height: 44px;
-  width: 44px;
+  height: $range-input-height;
+  width: $thumb-width-desktop;
 
   cursor: pointer;
 
@@ -61,8 +65,8 @@ input[type=range]::-ms-thumb {
 }
 
 input[type=range]::-moz-range-thumb {
-  height: 44px;
-  width: 44px;
+  height: $range-input-height;
+  width: $thumb-width-desktop;
 
   border-radius: 0px;
   border: 0 none;
@@ -74,8 +78,8 @@ input[type=range]::-moz-range-thumb {
 }
 
 input[type=range]::-webkit-slider-thumb {
-  height: 44px;
-  width: 44px;
+  height: $range-input-height;
+  width: $thumb-width-desktop;
 
   border-radius: 0px;
   border: 0 none;
@@ -87,6 +91,20 @@ input[type=range]::-webkit-slider-thumb {
   z-index: 99;
 }
 
+.mobile {
+  input[type=range]::-ms-thumb {
+    width: $thumb-width-mobile;
+  }
+
+  input[type=range]::-moz-range-thumb {
+    width: $thumb-width-mobile;
+  }
+
+  input[type=range]::-webkit-slider-thumb {
+    width: $thumb-width-mobile;
+  }
+}
+
 /* Eliminate the default appearance and tooltip behaviour that is peculiar to IE and Edge. */
 input[type=range]::-ms-fill-lower {
   background: transparent;
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
index 57dfb7b0e..bd453a669 100644
--- a/src/styles/_utils.scss
+++ b/src/styles/_utils.scss
@@ -8,3 +8,11 @@
   transform: translateX(0);
   animation: stop-and-scroll 15s linear infinite;
 }
+
+.align-left {
+  text-align: left;
+}
+
+.align-right {
+  text-align: right;
+}
diff --git a/src/webpack.config.js b/src/webpack.config.js
index 58dd81692..cb00972f3 100644
--- a/src/webpack.config.js
+++ b/src/webpack.config.js
@@ -68,12 +68,6 @@ const config = {
           ]
         }
       }
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      filename: 'vendor.js',
-      chunks: ['share', 'window'],
-      minChunks: Infinity
     })
   ]
 }
@@ -87,6 +81,12 @@ if (process.env.NODE_ENV === 'production') {
         NODE_ENV: '"production"'
       }
     }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      filename: 'vendor.js',
+      chunks: ['share', 'window'],
+      minChunks: Infinity
+    }),
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,
       compress: {
@@ -96,11 +96,6 @@ if (process.env.NODE_ENV === 'production') {
   ]
 } else {
   config.plugins = [...config.plugins,
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"development"'
-      }
-    }),
     new DashboardPlugin(),
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
diff --git a/yarn.lock b/yarn.lock
index f2e4408b3..cbe3a931f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -106,6 +106,10 @@ ansi-align@^1.1.0:
   dependencies:
     string-width "^1.0.1"
 
+ansi-html@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -250,7 +254,7 @@ async@0.2.x, async@~0.2.9:
   version "0.2.10"
   resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
 
-async@^1.4.0:
+async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
@@ -2242,7 +2246,7 @@ events@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
 
-eventsource@~0.1.6:
+eventsource@0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
   dependencies:
@@ -2836,6 +2840,10 @@ html-encoding-sniffer@^1.0.1:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-entities@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+
 html-minifier@^3.2.3:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.4.2.tgz#31896baaf735c1d95f7a0b7291f9dc36c0720752"
@@ -2890,7 +2898,7 @@ http-errors@~1.6.1:
     setprototypeof "1.0.3"
     statuses ">= 1.3.1 < 2"
 
-http-proxy-middleware@~0.17.1:
+http-proxy-middleware@~0.17.4:
   version "0.17.4"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
   dependencies:
@@ -3816,7 +3824,7 @@ minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-mkdirp@0.5, mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@0.5, mkdirp@0.5.x, mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -4448,6 +4456,14 @@ plur@^2.0.0:
   dependencies:
     irregular-plurals "^1.0.0"
 
+portfinder@^1.0.9:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
 postcss-calc@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -5385,12 +5401,12 @@ socket.io@^1.4.8:
     socket.io-client "1.7.3"
     socket.io-parser "2.3.1"
 
-sockjs-client@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.1.tgz#284843e9a9784d7c474b1571b3240fca9dda4bb0"
+sockjs-client@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.2.tgz#f0212a8550e4c9468c8cceaeefd2e3493c033ad5"
   dependencies:
     debug "^2.2.0"
-    eventsource "~0.1.6"
+    eventsource "0.1.6"
     faye-websocket "~0.11.0"
     inherits "^2.0.1"
     json3 "^3.3.2"
@@ -6109,33 +6125,36 @@ webpack-dashboard@0.3.0:
     socket.io "^1.4.8"
     socket.io-client "^1.4.8"
 
-webpack-dev-middleware@^1.4.0:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.1.tgz#c6b4cf428139cf1aefbe06a0c00fdb4f8da2f893"
+webpack-dev-middleware@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.2.tgz#2e252ce1dfb020dbda1ccb37df26f30ab014dbd1"
   dependencies:
     memory-fs "~0.4.1"
     mime "^1.3.4"
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
 
-webpack-dev-server@2.1.0-beta.9:
-  version "2.1.0-beta.9"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.1.0-beta.9.tgz#45745a4a6b84849c63e3a21dfab3be7bdb897554"
+webpack-dev-server@^2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.4.5.tgz#31384ce81136be1080b4b4cde0eb9b90e54ee6cf"
   dependencies:
+    ansi-html "0.0.7"
     chokidar "^1.6.0"
     compression "^1.5.2"
     connect-history-api-fallback "^1.3.0"
     express "^4.13.3"
-    http-proxy-middleware "~0.17.1"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.17.4"
     opn "4.0.2"
+    portfinder "^1.0.9"
     serve-index "^1.7.2"
     sockjs "0.3.18"
-    sockjs-client "1.1.1"
+    sockjs-client "1.1.2"
     spdy "^3.4.1"
     strip-ansi "^3.0.0"
     supports-color "^3.1.1"
-    webpack-dev-middleware "^1.4.0"
-    yargs "^4.7.1"
+    webpack-dev-middleware "^1.10.2"
+    yargs "^6.0.0"
 
 webpack-sources@^0.1.0:
   version "0.1.5"