diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue index 18952ba2..516c9c12 100644 --- a/components/app/AudioPlayer.vue +++ b/components/app/AudioPlayer.vue @@ -74,10 +74,11 @@
0:00
@@ -132,7 +133,9 @@ export default { touchStartTime: 0, touchEndY: 0, useChapterTrack: false, - isLoading: false + isLoading: false, + touchTrackStart: false, + dragPercent: 0 } }, computed: { @@ -268,6 +271,10 @@ export default { } }, methods: { + touchstartTrack(e) { + if (!e || !e.touches || !this.$refs.track || !this.showFullscreen) return + this.touchTrackStart = true + }, selectChapter(chapter) { this.seek(chapter.start) this.showChapterModal = false @@ -517,15 +524,60 @@ export default { this.touchStartTime = Date.now() }, touchend(e) { - if (!this.showFullscreen || !e.changedTouches) return + if (!e.changedTouches) return - this.touchEndY = e.changedTouches[0].screenY - var touchDuration = Date.now() - this.touchStartTime - if (touchDuration > 1200) { - // console.log('touch too long', touchDuration) - return + if (this.touchTrackStart) { + var touch = e.changedTouches[0] + const touchOnTrackPos = touch.pageX - 12 + const dragPercent = Math.max(0, Math.min(1, touchOnTrackPos / this.trackWidth)) + + var seekToTime = 0 + if (this.useChapterTrack && this.currentChapter) { + const currChapTime = dragPercent * this.currentChapterDuration + seekToTime = this.currentChapter.start + currChapTime + } else { + seekToTime = dragPercent * this.totalDuration + } + this.seek(seekToTime) + + if (this.$refs.draggingTrack) { + this.$refs.draggingTrack.style.width = '0px' + } + this.touchTrackStart = false + } else if (this.showFullscreen) { + this.touchEndY = e.changedTouches[0].screenY + var touchDuration = Date.now() - this.touchStartTime + if (touchDuration > 1200) { + // console.log('touch too long', touchDuration) + return + } + this.handleGesture() + } + }, + touchmove(e) { + if (!this.touchTrackStart) return + + var touch = e.touches[0] + const touchOnTrackPos = touch.pageX - 12 + const dragPercent = Math.max(0, Math.min(1, touchOnTrackPos / this.trackWidth)) + this.dragPercent = dragPercent + + if (this.$refs.draggingTrack) { + this.$refs.draggingTrack.style.width = this.dragPercent * this.trackWidth + 'px' + } + + var ts = this.$refs.currentTimestamp + if (ts) { + var currTimeStr = '' + if (this.useChapterTrack && this.currentChapter) { + const currChapTime = dragPercent * this.currentChapterDuration + currTimeStr = this.$secondsToTimestamp(currChapTime) + } else { + const dragTime = dragPercent * this.totalDuration + currTimeStr = this.$secondsToTimestamp(dragTime) + } + ts.innerText = currTimeStr } - this.handleGesture() }, clickMenuAction(action) { if (action === 'chapter_track') { @@ -632,7 +684,7 @@ export default { mounted() { document.body.addEventListener('touchstart', this.touchstart) document.body.addEventListener('touchend', this.touchend) - + document.body.addEventListener('touchmove', this.touchmove) this.$nextTick(this.init) }, beforeDestroy() { @@ -644,6 +696,7 @@ export default { this.forceCloseDropdownMenu() document.body.removeEventListener('touchstart', this.touchstart) document.body.removeEventListener('touchend', this.touchend) + document.body.removeEventListener('touchmove', this.touchmove) if (this.onPlayingUpdateListener) this.onPlayingUpdateListener.remove() if (this.onMetadataListener) this.onMetadataListener.remove() diff --git a/ios/App/Podfile b/ios/App/Podfile index dcdae730..89125e80 100644 --- a/ios/App/Podfile +++ b/ios/App/Podfile @@ -9,12 +9,12 @@ install! 'cocoapods', :disable_input_output_paths => true def capacitor_pods pod 'Capacitor', :path => '../../node_modules/@capacitor/ios' pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios' - pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app' - pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog' - pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics' - pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network' - pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar' - pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage' + pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app' + pod 'CapacitorDialog', :path => '..\..\node_modules\@capacitor\dialog' + pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics' + pod 'CapacitorNetwork', :path => '..\..\node_modules\@capacitor\network' + pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar' + pod 'CapacitorStorage', :path => '..\..\node_modules\@capacitor\storage' end target 'App' do diff --git a/plugins/capacitor/AbsAudioPlayer.js b/plugins/capacitor/AbsAudioPlayer.js index eb74eee8..1afa275a 100644 --- a/plugins/capacitor/AbsAudioPlayer.js +++ b/plugins/capacitor/AbsAudioPlayer.js @@ -187,6 +187,7 @@ class AbsAudioPlayerWeb extends WebPlugin { return } this.player.currentTime = this.trackStartTime + this.sendPlaybackMetadata(PlayerState.READY) if (this.playWhenReady) { this.player.play() @@ -195,10 +196,9 @@ class AbsAudioPlayerWeb extends WebPlugin { evtTimeupdate() { } sendPlaybackMetadata(playerState) { - var currentTime = this.player ? this.player.currentTime || 0 : 0 this.notifyListeners('onMetadata', { duration: this.totalDuration, - currentTime, + currentTime: this.overallCurrentTime, playerState }) }