diff --git a/src/App.vue b/src/App.vue
index cc012539252c37bf80617d500ee1a72a5205204a..39eeb97a8516b6f44de9b360447a2e1037a74266 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,9 +27,9 @@
<router-view />
</AppContent>
<Player />
- <div class="floatControl">
+ <!-- <div class="floatControl">
Skip intro
- </div>
+ </div> -->
</Content>
</template>
diff --git a/src/components/Player.vue b/src/components/Player.vue
index a908923d6800e94367d0a4387fb46e7953aca5f8..6cf0660a1d3957a742106919d12a2bc36fdb71b0 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -53,12 +53,13 @@
<span>{{ secondsToHHMMSS(currentSeek) }} / {{ secondsToHHMMSS(getDuration) }}</span>
<input
type="range"
+ class="rangeStyle"
min="0"
:max="getDuration"
step=".5"
:value="currentSeek"
:disabled="!getSeek"
- @input="changeTempSeek($event.target.value)"
+ @input="restyleInput(); changeTempSeek($event.target.value)"
@change="seekLocked = false; seekEpisode($event.target.value)">
</div>
<div class="volumeControls">
@@ -67,14 +68,14 @@
:class="getVolume == 0 ? 'volumeMute' : 'volumeFull'"
@click="toggleMute" />
<input
- class="volume"
+ class="volume rangeStyle"
type="range"
name="volume"
min="0"
max="1"
step=".05"
:value="getVolume"
- @input="setVolume($event.target.value)">
+ @input="restyleInput(); setVolume($event.target.value)">
</div>
</div>
</template>
@@ -108,6 +109,14 @@ export default {
}
},
},
+ watch: {
+ getSeeky() {
+ this.restyleInput()
+ },
+ },
+ mounted() {
+ this.restyleInput()
+ },
methods: {
...mapActions([
'setVolume',
@@ -120,11 +129,22 @@ export default {
this.seekLocked = true
this.tmpSeek = value
},
- secondsToHHMMSS(duration) {
- let hhmmss = new Date(duration * 1000).toISOString().substr(11, 8)
+ secondsToHHMMSS(seconds) {
+ if (!seconds) {
+ seconds = 0
+ }
+ let hhmmss = new Date(seconds * 1000).toISOString().substr(11, 8)
hhmmss = hhmmss.replace(/^(00:)/, '')
return hhmmss
},
+ restyleInput() {
+ const element0 = document.getElementsByClassName('rangeStyle')[0]
+ let value = (element0.value - element0.min) / (element0.max - element0.min) * 100
+ element0.style.background = 'linear-gradient(to right, #fff 0%, #fff ' + value + '%, #70bbe4 ' + value + '%, #70bbe4 100%)'
+ const element1 = document.getElementsByClassName('rangeStyle')[1]
+ value = (element1.value - element1.min) / (element1.max - element1.min) * 100
+ element1.style.background = 'linear-gradient(to right, #fff 0%, #fff ' + value + '%, #70bbe4 ' + value + '%, #70bbe4 100%)'
+ },
},
}
</script>
@@ -255,34 +275,22 @@ export default {
input[type=range] {
-webkit-appearance: none;
width: 100%;
- background: transparent;
+ height: 5px;
+ min-height: 5px;
+ background: linear-gradient(to right, #fff 0%, #fff 50%, #70bbe4 50%, #70bbe4 100%);
+ border-radius: 3px;
+ outline: none;
&:focus {
outline: none;
}
- &::-webkit-slider-runnable-track {
- width: 100%;
- height: 5px;
- background: #3071a9;
- border-radius: 3px;
- }
-
- &:focus::-webkit-slider-runnable-track {
- background: #367ebd;
+ &::-moz-range-progress {
+ background: white;
}
&::-moz-range-track {
- width: 100%;
- height: 5px;
background: #70bbe4;
- border-radius: 3px;
- }
-
- &::-moz-range-progress {
- background: white;
- height: 5px;
- border-radius: 3px;
}
&::-webkit-slider-thumb {
@@ -292,16 +300,17 @@ input[type=range] {
width: 15px;
border-radius: 50%;
background: white;
- margin-top: -5px;
}
&::-moz-range-thumb {
+ -webkit-appearance: none;
border: none;
height: 15px;
width: 15px;
border-radius: 50%;
background: white;
}
+
}
.volumeControls {
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 4f240773159c53944069628ea93e8ef483eb2873..2ce6689f7b24bf783a77750d12ee7ca37a614024 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -193,7 +193,6 @@ export default {
.replaceAll('<li>', '')
.replaceAll('</ul>', ' ')
.replaceAll('</li>', '')
- console.log(episodeDescription)
return episodeDescription
},
readableDate(datetime) {
diff --git a/src/services/Player.js b/src/services/Player.js
index df90d955ad6c4c5bc4ef45fa33c3aa6081093c8f..07bb607d1678eaba533c05ba1f9e76b4fc2b8428 100644
--- a/src/services/Player.js
+++ b/src/services/Player.js
@@ -27,7 +27,7 @@ let audioPlayer = null
export class Player {
- doPlay(src) {
+ load(src) {
if (audioPlayer !== null) {
audioPlayer.fade(store.getters.getVolume, 0, 500)
@@ -40,15 +40,20 @@ export class Player {
src,
html5: true,
volume: store.getters.getVolume,
+ onLoad() {
+ store.dispatch('setBuffering', true)
+ },
onplay() {
const duration = audioPlayer.duration()
store.dispatch('setPlaying', true)
store.dispatch('setBuffering', false)
+ store.dispatch('setPausing', false)
store.dispatch('setDuration', duration)
},
onpause() {
store.dispatch('setPlaying', false)
+ store.dispatch('setPausing', true)
store.dispatch('setBuffering', false)
},
onend() {
@@ -56,28 +61,20 @@ export class Player {
},
})
audioPlayer.unload()
- audioPlayer.play()
- audioPlayer.fade(0, store.getters.getVolume, 500)
}
- updateSeek() {
- const vm = this
- setTimeout(function() {
- if (audioPlayer !== null) {
- const seek = audioPlayer.seek()
- store.dispatch('setSeek', seek)
- store.dispatch('storePlaybacktime', seek)
- vm.updateSeek()
- }
- }, 1000)
+ play() {
+ audioPlayer.play()
+ audioPlayer.fade(0, store.getters.getVolume, 500)
+
}
- doPause() {
+ pause() {
audioPlayer.pause()
}
- doResume() {
+ resume() {
audioPlayer.play()
}
@@ -85,7 +82,7 @@ export class Player {
audioPlayer.seek(startTime)
}
- setVolume(volume) {
+ volume(volume) {
if (audioPlayer !== null) {
audioPlayer.volume(volume)
}
@@ -95,4 +92,18 @@ export class Player {
return audioPlayer
}
+ updateSeek() {
+ const vm = this
+ setTimeout(function() {
+ if (audioPlayer !== null) {
+ if (audioPlayer.state() === 'loaded') {
+ const seek = audioPlayer.seek()
+ store.dispatch('setSeek', seek)
+ store.dispatch('storePlaybacktime', seek)
+ }
+ vm.updateSeek()
+ }
+ }, 1000)
+ }
+
}
diff --git a/src/store/player.js b/src/store/player.js
index 03f442b0efcd8f621f71bdaebb64695165131922..05031ae970eed0d44c52c7969cf7aef181de3068 100644
--- a/src/store/player.js
+++ b/src/store/player.js
@@ -85,7 +85,7 @@ export default {
setVolume(state, volume) {
state.volume = volume
localStorage.setItem('podcast.volume', volume)
- player.setVolume(state.volume)
+ player.volume(state.volume)
},
toggleMute(state) {
if (state.isMute) {
@@ -101,7 +101,7 @@ export default {
}
}
localStorage.setItem('podcast.volume', state.volume)
- player.setVolume(state.volume)
+ player.volume(state.volume)
},
setTitle(state, title) {
state.title = title
@@ -172,30 +172,19 @@ export default {
if (episode.playtime) {
context.commit('setSeek', episode.playtime)
}
+ player.load(episode.enclosure)
},
playEpisode(context, episode) {
if (context.state.isPaused && episode.id === context.state.episodeId) {
- context.commit('setPausing', false)
- context.commit('setBuffering', true)
- if (player.state()) {
- player.doResume()
- } else {
- player.doPlay(episode.enclosure)
- }
+ player.play()
} else {
context.dispatch('loadEpisode', episode)
context.dispatch('addEpisode', episode)
- context.commit('setPlaying', true)
- context.commit('setPausing', false)
- context.commit('setBuffering', true)
- player.doPlay(episode.enclosure)
+ player.play()
}
},
pauseEpisode(context) {
- context.commit('setBuffering', false)
- context.commit('setPlaying', false)
- context.commit('setPausing', true)
- player.doPause()
+ player.pause()
},
setSeek(context, startTime) {
@@ -207,15 +196,9 @@ export default {
return true
}
if (context.state.isPaused) {
- context.commit('setPlaying', true)
- context.commit('setBuffering', true)
- context.commit('setPausing', false)
- player.doResume()
+ player.play()
} else {
- context.commit('setBuffering', false)
- context.commit('setPausing', true)
- context.commit('setPausing', true)
- player.doPause()
+ player.pause()
}
},
@@ -227,6 +210,10 @@ export default {
context.commit('seekEpisode', startTime)
},
+ setPausing(context, state) {
+ context.commit('setPausing', state)
+ },
+
storePlaybacktime(context, position) {
const episodeId = context.state.episodeId
const episode = context.getters.episodeById(episodeId)