feat(share-tab): Adapt sharing UI, buttons for volume slider

Author: alexander-heimbuch

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"

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>

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,62 +56,36 @@
   }
 
   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 {
     data() {
       return {
         volume: this.$select('volume'),
         rate: this.$select('rate'),
-        version: this.$select('debug.version'),
+        version: this.$select('runtime.version'),
         theme: this.$select('theme')
       }
     },
     methods: {
       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;