Fix:Changing orientation update audio player progress bar

This commit is contained in:
advplyr
2022-12-11 10:49:05 -06:00
parent 80cda129d2
commit 69996a4346
+19 -14
View File
@@ -380,9 +380,9 @@ export default {
// If 4 seconds or less into current chapter, then go to previous // If 4 seconds or less into current chapter, then go to previous
if (this.currentTime - this.currentChapter.start <= 4) { if (this.currentTime - this.currentChapter.start <= 4) {
var currChapterIndex = this.chapters.findIndex((ch) => Number(ch.start) <= this.currentTime && Number(ch.end) >= this.currentTime) const currChapterIndex = this.chapters.findIndex((ch) => Number(ch.start) <= this.currentTime && Number(ch.end) >= this.currentTime)
if (currChapterIndex > 0) { if (currChapterIndex > 0) {
var prevChapter = this.chapters[currChapterIndex - 1] const prevChapter = this.chapters[currChapterIndex - 1]
this.seek(prevChapter.start) this.seek(prevChapter.start)
} }
} else { } else {
@@ -416,19 +416,19 @@ export default {
this.updateReadyTrack() this.updateReadyTrack()
}, },
setChunksReady(chunks, numSegments) { setChunksReady(chunks, numSegments) {
var largestSeg = 0 let largestSeg = 0
for (let i = 0; i < chunks.length; i++) { for (let i = 0; i < chunks.length; i++) {
var chunk = chunks[i] const chunk = chunks[i]
if (typeof chunk === 'string') { if (typeof chunk === 'string') {
var chunkRange = chunk.split('-').map((c) => Number(c)) const chunkRange = chunk.split('-').map((c) => Number(c))
if (chunkRange.length < 2) continue if (chunkRange.length < 2) continue
if (chunkRange[1] > largestSeg) largestSeg = chunkRange[1] if (chunkRange[1] > largestSeg) largestSeg = chunkRange[1]
} else if (chunk > largestSeg) { } else if (chunk > largestSeg) {
largestSeg = chunk largestSeg = chunk
} }
} }
var percentageReady = largestSeg / numSegments const percentageReady = largestSeg / numSegments
var widthReady = Math.round(this.trackWidth * percentageReady) const widthReady = Math.round(this.trackWidth * percentageReady)
if (this.readyTrackWidth === widthReady) { if (this.readyTrackWidth === widthReady) {
return return
} }
@@ -480,17 +480,17 @@ export default {
}, },
updateTrack() { updateTrack() {
// Update progress track UI // Update progress track UI
var percentDone = this.currentTime / this.totalDuration let percentDone = this.currentTime / this.totalDuration
var totalPercentDone = percentDone const totalPercentDone = percentDone
var bufferedPercent = this.bufferedTime / this.totalDuration let bufferedPercent = this.bufferedTime / this.totalDuration
var totalBufferedPercent = bufferedPercent const totalBufferedPercent = bufferedPercent
if (this.useChapterTrack && this.currentChapter) { if (this.useChapterTrack && this.currentChapter) {
var currChapTime = this.currentTime - this.currentChapter.start const currChapTime = this.currentTime - this.currentChapter.start
percentDone = currChapTime / this.currentChapterDuration percentDone = currChapTime / this.currentChapterDuration
bufferedPercent = Math.max(0, Math.min(1, (this.bufferedTime - this.currentChapter.start) / this.currentChapterDuration)) bufferedPercent = Math.max(0, Math.min(1, (this.bufferedTime - this.currentChapter.start) / this.currentChapterDuration))
} }
var ptWidth = Math.round(percentDone * this.trackWidth) const ptWidth = Math.round(percentDone * this.trackWidth)
this.$refs.playedTrack.style.width = ptWidth + 'px' this.$refs.playedTrack.style.width = ptWidth + 'px'
this.$refs.bufferedTrack.style.width = Math.round(bufferedPercent * this.trackWidth) + 'px' this.$refs.bufferedTrack.style.width = Math.round(bufferedPercent * this.trackWidth) + 'px'
@@ -760,7 +760,12 @@ export default {
this.onProgressSyncSuccess = AbsAudioPlayer.addListener('onProgressSyncSuccess', this.showProgressSyncSuccess) this.onProgressSyncSuccess = AbsAudioPlayer.addListener('onProgressSyncSuccess', this.showProgressSyncSuccess)
}, },
screenOrientationChange() { screenOrientationChange() {
setTimeout(this.updateScreenSize, 50) setTimeout(() => {
this.updateScreenSize()
this.trackWidth = this.$refs.track.clientWidth
this.updateTrack()
this.updateReadyTrack()
}, 50)
}, },
updateScreenSize() { updateScreenSize() {
this.windowHeight = window.innerHeight this.windowHeight = window.innerHeight