Merge pull request #364 from alexander-heimbuch/features/speed-slider

feat(speed-slider): Improve Speed Slider
podlove · Apr 25, 2017 · 61a0197 · 61a0197
2 parents 23f1d7b + 7249b0b
commit 61a0197
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "deploy:surge": "surge --project ./dist --domain podlove-player.surge.sh"
   },
   "dependencies": {
+    "bluebird": "^3.5.0",
     "clipboard": "1.6.0",
     "color": "1.0.3",
     "detect-browser": "1.6.2",
@@ -57,7 +58,6 @@
     "redux": "3.5.2",
     "revue": "3.0.0",
     "superagent": "3.4.1",
-    "viscroll": "1.0.0",
     "vue": "2.2.6"
   },
   "devDependencies": {

diff --git a/src/components/shared/Button.vue b/src/components/shared/Button.vue
@@ -1,10 +1,23 @@
 <template>
-  <button class="podlove-player--button" @click="click()"><slot></slot></button>
+  <button :style="buttonStyle(color)" class="podlove-player--button" @click="click()"><slot></slot></button>
 </template>
 
 <script>
+  const buttonStyle = color => {
+    if (!color) {
+      return {}
+    }
+
+    return {
+      'background-color': color
+    }
+  }
+
   export default {
-    props: ['click']
+    props: ['click', 'color'],
+    methods: {
+      buttonStyle
+    }
   }
 </script>
 

diff --git a/src/components/shared/Slider.vue b/src/components/shared/Slider.vue
@@ -94,6 +94,7 @@
       border: 1px solid;
       height: 20px;
       width: 10px;
+      margin-left: -5px;
       pointer-events: none;
       border: 1px solid $background-color;
     }

diff --git a/src/components/shared/TabHeader.vue b/src/components/shared/TabHeader.vue
@@ -22,6 +22,7 @@
 </script>
 <style lang="scss">
   @import 'variables';
+
   .tab-header {
     position: relative;
     width: 100%;
@@ -35,12 +36,11 @@
     text-transform: uppercase;
     height: $tabs-header-height;
 
-
     &::after {
       position: absolute;
       top: $tabs-header-height;
-      left: 0;
-      right: 0;
+      left: 1px;
+      right: 1px;
       content: ' ';
       display: block;
       height: $padding;

diff --git a/src/components/tabs/settings/Settings.vue b/src/components/tabs/settings/Settings.vue
@@ -3,29 +3,19 @@
     <div class="input">
       <h4 class="label">
         <span class="title">Volume</span>
-        <span class="volume">{{decimalToPercent(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="range">
-        <span class="range--start">0%</span>
-        <span class="range--end">100%</span>
-      </div>
     </div>
     <div class="input">
       <h4 class="label">
-        <span class="title">Rate</span>
-        <div>
-          <PodloveButton class="solid preset" :class="{active: rate > 0.75 && rate < 0.85}" :click="fixedRate(0.8)">0.8x</PodloveButton>
-          <PodloveButton class="solid preset" :class="{active: rate > 0.95 && rate < 1.05}" :click="fixedRate(1)">1x</PodloveButton>
-          <PodloveButton class="solid preset" :class="{active: rate > 1.45 && rate < 1.55}" :click="fixedRate(1.5)">1.5x</PodloveButton>
-          <PodloveButton class="solid preset" :class="{active: rate > 1.95 && rate < 2.05}" :click="fixedRate(2)">2x</PodloveButton>
-          <PodloveButton class="solid preset" :class="{active: rate > 2.95 && rate < 3.05}" :click="fixedRate(3)">3x</PodloveButton>
-        </div>
+        <span class="title">Speed</span>
+        <span class="rate">{{decimalToPercent(rate)}}%</span>
       </h4>
-      <PodloveSlider min="0.5" max="4" :value="rate" step="0.001" :onInput="setRate" :thumbColor="theme.settings.slider.thumb"></PodloveSlider>
-      <div class="range">
-        <span class="range--start">0.5x</span>
-        <span class="range--end">4x</span>
+      <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>
     </div>
     <div class="footer">
@@ -43,6 +33,16 @@
     return `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(store.store.getState()))}`;
   }
 
+  const decimalToPercent = input => {
+    input = parseFloat(input) * 100
+    return Math.round(input)
+  }
+
+  const buttonStyle = (theme) => ({
+    color: theme.settings.slider.text,
+    background: theme.settings.slider.button
+  })
+
   const setVolume = volume => {
     store.dispatch(store.actions.setVolume(volume))
   }
@@ -51,10 +51,46 @@
     store.dispatch(store.actions.setRate(rate))
   }
 
-  const fixedRate = rate => () => setRate(rate)
+  const roundUp = (base, number) => {
+    if (number % base == 0) {
+      return number + base
+    }
 
-  const decimalToPercent = input => {
-    return parseInt(input * 100, 10) + '%'
+    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 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
+    }
   }
 
   export default {
@@ -70,7 +106,9 @@
       exportStore,
       setVolume,
       setRate,
-      fixedRate,
+      increaseRate,
+      decreaseRate,
+      buttonStyle,
       decimalToPercent
     },
     components: {
@@ -84,6 +122,7 @@
   @import 'variables';
 
   $preset-width: 40px;
+  $button-size: 30px;
 
   .podlove-settings {
     width: 100%;
@@ -119,5 +158,23 @@
     .preset {
       width: $preset-width;
     }
+
+    .input--rate {
+      display: flex;
+      align-items: center;
+    }
+
+    .rate--slider {
+      width: 100%;
+      margin-left: $margin / 2;
+    }
+
+    .rate-button {
+      font-weight: bold;
+      font-size: 1.2em;
+      height: $button-size;
+      width: $button-size;
+      margin-right: $margin / 2;
+    }
   }
 </style>
diff --git a/src/embed/embed.js b/src/embed/embed.js
@@ -1,8 +1,5 @@
-import get from 'lodash/get'
-import head from 'lodash/head'
-import isString from 'lodash/isString'
+import { get, head, isString } from 'lodash'
 import Bluebird from 'bluebird'
-import browser from 'detect-browser'
 
 import { findNode, createNode, appendNode, tag } from 'utils/dom'
 import requestConfig from 'utils/request'
@@ -15,10 +12,7 @@ import iframeResizerContentWindow from 'raw-loader!iframe-resizer/js/iframeResiz
 const playerSandbox = anchor => {
   const frame = createNode('iframe')
 
-  if (browser.name !== 'ios') {
-    frame.style.width = '100%'
-  }
-
+  frame.setAttribute('width', '100%')
   frame.setAttribute('seamless', '')
   frame.setAttribute('scrolling', 'no')
   frame.setAttribute('frameborder', '0')

diff --git a/src/store/reducers/tabs.js b/src/store/reducers/tabs.js
@@ -2,7 +2,8 @@ const get = require('lodash/get')
 
 const INITIAL = {
   'chapters': false,
-  'settings': false
+  'settings': false,
+  'share': false
 }
 
 const tabs = (state = INITIAL, action) => {

diff --git a/src/store/reducers/tabs.test.js b/src/store/reducers/tabs.test.js
@@ -6,7 +6,8 @@ let testState
 test.beforeEach(t => {
     testState = {
         'chapters': false,
-        'settings': false
+        'settings': false,
+        'share': false
     }
 })
 

diff --git a/src/store/reducers/theme.js b/src/store/reducers/theme.js
@@ -34,7 +34,9 @@ const themeColors = (colors = {}) => {
     },
     settings: {
       slider: {
-        thumb: primary
+        thumb: primary,
+        button: color(primary).fade(0.8),
+        text: primary
       }
     },
     tabs: {

diff --git a/yarn.lock b/yarn.lock
@@ -1026,7 +1026,7 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@^3.0.0, bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.4.7:
+bluebird@^3.0.0, bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.4.7, bluebird@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
@@ -3124,10 +3124,6 @@ [email protected], isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
-iscroll@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/iscroll/-/iscroll-5.2.0.tgz#d513307088b5b25a4f893af474804468481829c8"
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -5924,13 +5920,6 @@ [email protected]:
   dependencies:
     extsprintf "1.0.2"
 
-[email protected]:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/viscroll/-/viscroll-1.0.0.tgz#ab85071bd29bfd1ded04d072315534ad8925c8ab"
-  dependencies:
-    iscroll "^5.2.0"
-    vue "^2.1.4"
-
 [email protected]:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
@@ -5976,7 +5965,7 @@ vue-template-es2015-compiler@^1.2.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.5.1.tgz#0c36cc57aa3a9ec13e846342cb14a72fcac8bd93"
 
-[email protected], vue@^2.1.4:
+[email protected]:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.2.6.tgz#451714b394dd6d4eae7b773c40c2034a59621aed"