diff --git a/components/playbar/index.jsx b/components/playbar/index.jsx index dc0d366..aabcfbd 100644 --- a/components/playbar/index.jsx +++ b/components/playbar/index.jsx @@ -68,7 +68,7 @@ const styles = { padding: '0 0em 1em', width: '200px', cursor: 'pointer', - transition: '.25s', + transition: '.5s', ':hover': { background: 'rgba(92, 67, 232, .8)' } diff --git a/components/player/index.js b/components/player/index.js index 27c154c..7bd0012 100644 --- a/components/player/index.js +++ b/components/player/index.js @@ -1,7 +1,7 @@ import { store } from '../../client.js' import { remote } from 'electron' const addSeconds = require('date-fns/add_seconds') -const differenceInSeconds = require('date-fns/difference_in_seconds') +const differenceInMilliseconds = require('date-fns/difference_in_milliseconds') export default class Player { playAlbum (album) { @@ -32,20 +32,20 @@ export default class Player { } setDuration (duration = 0, previous) { if (!previous) this.totalDuration = duration - let end = addSeconds(new Date(), duration) - this.seconds = differenceInSeconds(end, new Date()) + let end = addSeconds(new Date(), previous ? (duration / 1000) : duration) + this.seconds = differenceInMilliseconds(end, new Date()) clearInterval(this.interval) - this.setCounter(this.seconds) + this.setCounter(this.seconds / 1000) this.interval = setInterval(() => { - this.remaining = differenceInSeconds(end, new Date()) + this.remaining = differenceInMilliseconds(end, new Date()) if (this.remaining < 1) { this.setCounter(0) clearInterval(this.interval) } else { - this.setCounter(this.remaining) - this.setPlaybar(this.totalDuration, this.remaining) + this.setCounter(this.remaining / 1000) + this.setPlaybar(this.totalDuration * 1000, this.remaining) } - }, 666) + }, 250) } clearInterval () { clearInterval(this.interval) @@ -64,7 +64,7 @@ export default class Player { } setPlaybar (duration, progress) { if (!this.range) this.range = document.querySelector('[data-range]') - let elapsed = ((progress / duration) * 100) - this.range.style.width = `${100 - elapsed}%` + let elapsed = (100 - ((progress / duration) * 100)) + '%' + this.range.style.width = elapsed } }