html5 audio

mashaal · Apr 2, 2017 · 1ff0c2c · 1ff0c2c
1 parent 1c8f993
commit 1ff0c2c
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 33 deletions.
diff --git a/components/playbar/index.jsx b/components/playbar/index.jsx
@@ -6,12 +6,19 @@ import { rafThrottle } from '../utilities'
 
 @Radium
 export default class Playbar extends Component {
+  constructor () {
+    super()
+    this.state = {
+      hover: false,
+      left: false
+    }
+  }
   shouldComponentUpdate = (nextProps, nextState) => {
     return shallowCompare(this, nextProps, nextState)
   }
   scan = event => {
     event.preventDefault()
-    window.player.scan(this.percentage)
+    window.player.scan(event.clientX / window.innerWidth)
   }
   previous = () => {
     let previous = this.props.player.previous
@@ -26,13 +33,20 @@ export default class Playbar extends Component {
   toggle = () => {
     window.player.toggle()
   }
+  handleMove = event => {
+    event.preventDefault()
+    this.setState({left: event.clientX - 4})
+  }
   render () {
     return (
       <div style={[styles.playbar, this.props.playbar.display ? styles.show : styles.hide]}>
-        <div data-range style={styles.range} />
-        <div data-buffer style={styles.buffer} />
+        <audio id='xxx' />
+        <div style={{position: 'relative', height: 40, width: '100%', cursor: 'none'}} onMouseMove={this.handleMove} onMouseOver={() => this.setState({hover:true})} onMouseLeave={() => this.setState({hover:false})} onClick={this.scan}>
+          <div data-range style={styles.range} />
+          <div data-buffer style={styles.buffer} />
+          <div style={[styles.slider, this.state.hover ? {opacity: 1} : {opacity: 0}, {transform: `translateX(${this.state.left}px)` || 0}]} ref='slider' />
+        </div>
         <div style={styles.panel}><span style={styles.span} key='previous' onClick={this.previous}>previous</span><span style={styles.span} key='toggle' onClick={this.toggle}>{this.props.playbar.toggle}</span><span style={styles.span} key='next' onClick={this.next}>next</span></div>
-        <div style={[styles.slider, this.state.hover ? {opacity: 1} : {opacity: 0}]} ref='slider' onClick={this.scan} />
       </div>
     )
   }
@@ -50,6 +64,15 @@ const styles = {
     width: '100%',
     transition: '.666s'
   },
+  slider: {
+    position: 'absolute',
+    width: 4,
+    transition: 'opacity .666s',
+    height: 40,
+    background: 'white',
+    top: 0,
+    zIndex: 69
+  },
   panel: {
     height: 45,
     width: '100%',
@@ -89,7 +112,6 @@ const styles = {
     top: 0,
     position: 'absolute',
     background: 'rgba(92, 67, 232, 0.666)',
-    cursor: 'not-allowed',
     zIndex: 20
   },
   show: {

diff --git a/components/player/index.js b/components/player/index.js
@@ -1,9 +1,30 @@
 import { store } from '../../client.js'
 import { remote } from 'electron'
-const addSeconds = require('date-fns/add_seconds')
-const differenceInMilliseconds = require('date-fns/difference_in_milliseconds')
 
 export default class Player {
+  constructor () {
+    this.playing = false
+    this.audio = document.getElementById('xxx')
+    let interval
+    this.audio.onplaying = () => {
+      calc()
+    }
+    this.audio.onseeked = () => {
+      calc()
+    }
+    this.audio.onended = () => {
+      this.next()
+    }
+    let calc = () => {
+      clearInterval(interval)
+      interval = setInterval(() => {
+        let d = this.audio.duration
+        let p = this.audio.currentTime
+        this.setCounter(d - p)
+        this.setPlaybar(d, p)
+      }, 50)
+    }
+  }
   playAlbum (album) {
     store.dispatch({type: 'PLAY_ALBUM', album: album})
     this.local(store.getState().player.track)
@@ -16,55 +37,46 @@ export default class Player {
     if (store.getState().player.next) this.playTrack(store.getState().player.next)
   }
   stop () {
-    remote.app.stop()
+    this.audio.stop()
     store.dispatch({type: 'STOP'})
   }
   toggle () {
-    remote.app.toggle()
+    if (this.playing) this.pause()
+    else this.resume()
   }
   pause () {
-    clearInterval(this.interval)
+    this.audio.pause()
+    this.playing = false
     store.dispatch({type: 'PAUSE'})
   }
   resume () {
-    this.setDuration(this.remaining, true)
+    this.audio.play()
+    this.playing = true
     store.dispatch({type: 'PLAY'})
   }
-  setDuration (duration = 0, previous) {
-    if (!previous) this.totalDuration = duration
-    let end = addSeconds(new Date(), previous ? (duration / 1000) : duration)
-    this.seconds = differenceInMilliseconds(end, new Date())
-    clearInterval(this.interval)
-    this.setCounter(this.seconds / 1000)
-    this.interval = setInterval(() => {
-      this.remaining = differenceInMilliseconds(end, new Date())
-      if (this.remaining < 1) {
-        this.setCounter(0)
-        clearInterval(this.interval)
-      } else {
-        this.setCounter(this.remaining / 1000)
-        this.setPlaybar(this.totalDuration * 1000, this.remaining)
-      }
-    }, 250)
-  }
-  clearInterval () {
-    clearInterval(this.interval)
+  scan (percentage) {
+    this.audio.currentTime = percentage * this.audio.duration
   }
   local (track) {
-    remote.app.playTrack(track)
     store.dispatch({type: 'METADATA', artist: track.artist, title: track.title, album: track.album})
+    remote.app.updateTouchBar({artist: track.artist, track: track.title})
+    this.audio.src = track.path
+    this.audio.play()
+    this.playing = true
   }
   setCounter (seconds) {
     if (!this.counter) this.counter = document.querySelector('figure h4')
     let results = {}
     results.hours = Math.floor(seconds / 60 / 60)
     results.minutes = Math.floor((seconds / 60) % 60)
     results.seconds = Math.floor(seconds % 60)
-    this.counter.innerText = '- ' + '00'.slice(results.hours.toString().length) + results.hours + ':' + '00'.slice(results.minutes.toString().length) + results.minutes + ':' + '00'.slice(results.seconds.toString().length) + results.seconds
+    let time = '- ' + '00'.slice(results.hours.toString().length) + results.hours + ':' + '00'.slice(results.minutes.toString().length) + results.minutes + ':' + '00'.slice(results.seconds.toString().length) + results.seconds
+    this.counter.innerText = time
+    remote.app.updateTouchBarTime(time)
   }
   setPlaybar (duration, progress) {
     if (!this.range) this.range = document.querySelector('[data-range]')
-    let elapsed = (100 - ((progress / duration) * 100)) + '%'
+    let elapsed = (((progress / duration) * 100)) + '%'
     this.range.style.width = elapsed
   }
 }