Add:Option to use chapter track #46, Change:Playback speed increment by 0.1 #57

This commit is contained in:
advplyr 2021-12-11 13:20:20 -06:00
parent d3a2c79a55
commit 6faa9b6324
6 changed files with 313 additions and 43 deletions

View file

@ -7,8 +7,24 @@
<div v-show="showCastBtn" class="top-3.5 right-20 absolute cursor-pointer">
<span class="material-icons text-3xl" @click="castClick">cast</span>
</div>
<div class="top-3 right-4 absolute cursor-pointer">
<span class="material-icons text-4xl" @click="$emit('close')">close</span>
<div class="top-4 right-4 absolute cursor-pointer">
<ui-dropdown-menu :items="menuItems" @action="clickMenuAction">
<span class="material-icons text-3xl">more_vert</span>
</ui-dropdown-menu>
</div>
</div>
<div v-if="useChapterTrack && showFullscreen" class="absolute total-track w-full px-3 z-30">
<div class="flex">
<p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ currentTimePretty }}</p>
<div class="flex-grow" />
<p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ totalTimeRemainingPretty }}</p>
</div>
<div class="w-full">
<div class="h-1 w-full bg-gray-500 bg-opacity-50 relative">
<div ref="totalReadyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
<div ref="totalPlayedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
</div>
</div>
</div>
@ -55,7 +71,6 @@
<div id="playerTrack" class="absolute bottom-0 left-0 w-full px-3">
<div ref="track" class="h-2 w-full bg-gray-500 bg-opacity-50 relative" :class="loading ? 'animate-pulse' : ''" @click="clickTrack">
<div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
<div ref="bufferTrack" class="h-full bg-gray-400 absolute top-0 left-0 pointer-events-none" />
<div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
</div>
<div class="flex pt-0.5">
@ -110,7 +125,6 @@ export default {
src: null,
volume: 0.5,
readyTrackWidth: 0,
bufferTrackWidth: 0,
playedTrackWidth: 0,
seekedTime: 0,
seekLoading: false,
@ -122,7 +136,8 @@ export default {
touchEndY: 0,
listenTimeInterval: null,
listeningTimeSinceLastUpdate: 0,
totalListeningTimeInSession: 0
totalListeningTimeInSession: 0,
useChapterTrack: false
}
},
computed: {
@ -134,6 +149,20 @@ export default {
this.$emit('update:playing', val)
}
},
menuItems() {
var items = []
items.push({
text: 'Chapter Track',
value: 'chapter_track',
icon: this.useChapterTrack ? 'check_box' : 'check_box_outline_blank'
})
items.push({
text: 'Close Player',
value: 'close',
icon: 'close'
})
return items
},
bookCoverAspectRatio() {
return this.$store.getters['getBookCoverAspectRatio']
},
@ -157,24 +186,43 @@ export default {
},
currentChapter() {
if (!this.audiobook || !this.chapters.length) return null
return this.chapters.find((ch) => ch.start <= this.currentTime && ch.end > this.currentTime)
return this.chapters.find((ch) => Number(ch.start.toFixed(2)) <= this.currentTime && Number(ch.end.toFixed(2)) > this.currentTime)
},
nextChapter() {
if (!this.chapters.length) return
return this.chapters.find((c) => c.start >= this.currentTime)
return this.chapters.find((c) => Number(c.start.toFixed(2)) > this.currentTime)
},
currentChapterTitle() {
return this.currentChapter ? this.currentChapter.title : ''
},
currentChapterDuration() {
return this.currentChapter ? this.currentChapter.end - this.currentChapter.start : this.totalDuration
},
downloadedCover() {
return this.download ? this.download.cover : null
},
totalDurationPretty() {
return this.$secondsToTimestamp(this.totalDuration)
},
currentTimePretty() {
return this.$secondsToTimestamp(this.currentTime)
},
timeRemaining() {
if (this.useChapterTrack && this.currentChapter) {
var currChapTime = this.currentTime - this.currentChapter.start
return (this.currentChapterDuration - currChapTime) / this.currentPlaybackRate
}
return this.totalTimeRemaining
},
totalTimeRemaining() {
return (this.totalDuration - this.currentTime) / this.currentPlaybackRate
},
totalTimeRemainingPretty() {
if (this.totalTimeRemaining < 0) {
return this.$secondsToTimestamp(this.totalTimeRemaining * -1)
}
return '-' + this.$secondsToTimestamp(this.totalTimeRemaining)
},
timeRemainingPretty() {
if (this.timeRemaining < 0) {
return this.$secondsToTimestamp(this.timeRemaining * -1)
@ -262,6 +310,11 @@ export default {
},
clickContainer() {
this.showFullscreen = true
// Update track for total time bar if useChapterTrack is set
this.$nextTick(() => {
this.updateTrack()
})
},
collapseFullscreen() {
this.showFullscreen = false
@ -309,7 +362,7 @@ export default {
},
setStreamReady() {
this.readyTrackWidth = this.trackWidth
this.$refs.readyTrack.style.width = this.trackWidth + 'px'
this.updateReadyTrack()
},
setChunksReady(chunks, numSegments) {
var largestSeg = 0
@ -329,7 +382,17 @@ export default {
return
}
this.readyTrackWidth = widthReady
this.$refs.readyTrack.style.width = widthReady + 'px'
this.updateReadyTrack()
},
updateReadyTrack() {
if (this.useChapterTrack) {
if (this.$refs.totalReadyTrack) {
this.$refs.totalReadyTrack.style.width = this.readyTrackWidth + 'px'
}
this.$refs.readyTrack.style.width = this.trackWidth + 'px'
} else {
this.$refs.readyTrack.style.width = this.readyTrackWidth + 'px'
}
},
updateTimestamp() {
var ts = this.$refs.currentTimestamp
@ -337,8 +400,14 @@ export default {
console.error('No timestamp el')
return
}
var currTimeClean = this.$secondsToTimestamp(this.currentTime)
ts.innerText = currTimeClean
var currTimeStr = ''
if (this.useChapterTrack && this.currentChapter) {
var currChapTime = Math.max(0, this.currentTime - this.currentChapter.start)
currTimeStr = this.$secondsToTimestamp(currChapTime)
} else {
currTimeStr = this.$secondsToTimestamp(this.currentTime)
}
ts.innerText = currTimeStr
},
timeupdate() {
if (!this.$refs.playedTrack) {
@ -356,16 +425,25 @@ export default {
}
this.updateTimestamp()
// if (this.noSyncUpdateTime) this.noSyncUpdateTime = false
// else this.sendStreamUpdate()
var perc = this.currentTime / this.totalDuration
var ptWidth = Math.round(perc * this.trackWidth)
this.updateTrack()
},
updateTrack() {
var percentDone = this.currentTime / this.totalDuration
var totalPercentDone = percentDone
if (this.useChapterTrack && this.currentChapter) {
var currChapTime = this.currentTime - this.currentChapter.start
percentDone = currChapTime / this.currentChapterDuration
}
var ptWidth = Math.round(percentDone * this.trackWidth)
if (this.playedTrackWidth === ptWidth) {
return
}
this.$refs.playedTrack.style.width = ptWidth + 'px'
this.playedTrackWidth = ptWidth
if (this.useChapterTrack) {
this.$refs.totalPlayedTrack.style.width = Math.round(totalPercentDone * this.trackWidth) + 'px'
}
},
seek(time) {
if (this.loading) return
@ -398,7 +476,12 @@ export default {
var offsetX = e.offsetX
var perc = offsetX / this.trackWidth
var time = perc * this.totalDuration
var time = 0
if (this.useChapterTrack && this.currentChapter) {
time = perc * this.currentChapterDuration + this.currentChapter.start
} else {
time = perc * this.totalDuration
}
if (isNaN(time) || time === null) {
console.error('Invalid time', perc, time)
return
@ -548,7 +631,6 @@ export default {
}
},
onMetadata(data) {
console.log('Native Audio On Metadata', JSON.stringify(data))
this.totalDuration = Number((data.duration / 1000).toFixed(2))
this.$emit('setTotalDuration', this.totalDuration)
this.currentTime = Number((data.currentTime / 1000).toFixed(2))
@ -558,11 +640,11 @@ export default {
this.setFromObj()
}
// if (this.stateName === 'ready_no_sync' || this.stateName === 'buffering_no_sync') this.noSyncUpdateTime = true
this.timeupdate()
},
init() {
async init() {
this.useChapterTrack = await this.$localStore.getUseChapterTrack()
this.onPlayingUpdateListener = MyNativeAudio.addListener('onPlayingUpdate', this.onPlayingUpdate)
this.onMetadataListener = MyNativeAudio.addListener('onMetadata', this.onMetadata)
@ -575,10 +657,7 @@ export default {
handleGesture() {
var touchDistance = this.touchEndY - this.touchStartY
if (touchDistance > 100) {
console.log('Collapsing')
this.collapseFullscreen()
} else {
console.log('Not collapsing touch distance =', touchDistance)
}
},
touchstart(e) {
@ -601,6 +680,20 @@ export default {
return
}
this.handleGesture()
},
clickMenuAction(action) {
if (action === 'chapter_track') {
this.useChapterTrack = !this.useChapterTrack
this.$nextTick(() => {
this.updateTimestamp()
this.updateTrack()
this.updateReadyTrack()
})
this.$localStore.setUseChapterTrack(this.useChapterTrack)
} else if (action === 'close') {
this.$emit('close')
}
}
},
mounted() {
@ -654,6 +747,12 @@ export default {
height: 60px;
}
.total-track {
bottom: 215px;
left: 0;
right: 0;
}
.title-author-texts {
transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: left, bottom, width, height;

View file

@ -22,7 +22,7 @@
/>
</div>
<modals-playback-speed-modal v-model="showPlaybackSpeedModal" :playback-speed.sync="playbackSpeed" @change="changePlaybackSpeed" />
<modals-playback-speed-modal v-model="showPlaybackSpeedModal" :playback-rate.sync="playbackSpeed" @update:playbackRate="updatePlaybackSpeed" @change="changePlaybackSpeed" />
<modals-chapters-modal v-model="showChapterModal" :current-chapter="currentChapter" :chapters="chapters" @select="selectChapter" />
<modals-sleep-timer-modal v-model="showSleepTimerModal" :current-time="sleepTimeRemaining" :sleep-timer-running="isSleepTimerRunning" :current-end-of-chapter-time="currentEndOfChapterTime" @change="selectSleepTimeout" @cancel="cancelSleepTimer" @increase="increaseSleepTimer" @decrease="decreaseSleepTimer" />
<modals-bookmarks-modal v-model="showBookmarksModal" :audiobook-id="audiobookId" :bookmarks="bookmarks" :current-time="currentTime" @select="selectBookmark" />
@ -411,11 +411,14 @@ export default {
this.streamOpen(this.$server.stream)
}
},
changePlaybackSpeed(speed) {
console.log(`[AudioPlayerContainer] Change Playback Speed: ${speed}`)
updatePlaybackSpeed(speed) {
if (this.$refs.audioPlayer) {
console.log(`[AudioPlayerContainer] Update Playback Speed: ${speed}`)
this.$refs.audioPlayer.setPlaybackSpeed(speed)
}
},
changePlaybackSpeed(speed) {
console.log(`[AudioPlayerContainer] Change Playback Speed: ${speed}`)
this.$store.dispatch('user/updateUserSettings', { playbackRate: speed })
},
settingsUpdated(settings) {

View file

@ -11,10 +11,9 @@
<ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
<template v-for="chapter in chapters">
<li :key="chapter.id" :id="`chapter-row-${chapter.id}`" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="currentChapterId === chapter.id ? 'bg-bg bg-opacity-80' : ''" role="option" @click="clickedOption(chapter)">
<div class="relative flex items-center justify-center pl-2 pr-16">
<div class="relative flex items-center pl-3" style="padding-right: 4.5rem">
<p class="font-normal block truncate text-sm text-white text-opacity-80">{{ chapter.title }}</p>
<!-- <div class="flex-grow" /> -->
<div class="absolute top-0 right-2 -mt-0.5">
<div class="absolute top-0 right-3 -mt-0.5">
<span class="font-mono text-white text-opacity-90 leading-3" style="letter-spacing: -0.5px">{{ $secondsToTimestamp(chapter.start) }}</span>
</div>
</div>

View file

@ -6,9 +6,9 @@
</div>
</template>
<div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
<div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="closeMenu">
<div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
<ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
<ul class="w-full" role="listbox" aria-labelledby="listbox-label">
<template v-for="rate in rates">
<li :key="rate" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="rate === selected ? 'bg-bg bg-opacity-80' : ''" role="option" @click="clickedOption(rate)">
<div class="flex items-center justify-center">
@ -17,6 +17,17 @@
</li>
</template>
</ul>
<div class="flex items-center justify-center py-3 border-t border-white border-opacity-10">
<button :disabled="!canDecrement" @click="decrement" class="icon-num-btn w-8 h-8 text-white text-opacity-75 rounded border border-white border-opacity-20 flex items-center justify-center">
<span class="material-icons">remove</span>
</button>
<div class="w-24 text-center">
<p class="text-xl">{{ playbackRate }}<span class="text-lg"></span></p>
</div>
<button :disabled="!canIncrement" @click="increment" class="icon-num-btn w-8 h-8 text-white text-opacity-75 rounded border border-white border-opacity-20 flex items-center justify-center">
<span class="material-icons">add</span>
</button>
</div>
</div>
</div>
</modals-modal>
@ -26,10 +37,21 @@
export default {
props: {
value: Boolean,
playbackSpeed: Number
playbackRate: Number
},
data() {
return {}
return {
currentPlaybackRate: 0,
MIN_SPEED: 0.5,
MAX_SPEED: 3
}
},
watch: {
show(newVal) {
if (newVal) {
this.currentPlaybackRate = this.selected
}
}
},
computed: {
show: {
@ -42,27 +64,56 @@ export default {
},
selected: {
get() {
return this.playbackSpeed
return this.playbackRate
},
set(val) {
this.$emit('update:playbackSpeed', val)
this.$emit('update:playbackRate', val)
}
},
rates() {
return [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
return [0.5, 1, 1.2, 1.5, 2]
},
canIncrement() {
return this.playbackRate + 0.1 <= this.MAX_SPEED
},
canDecrement() {
return this.playbackRate - 0.1 >= this.MIN_SPEED
}
},
methods: {
clickedOption(speed) {
if (this.selected === speed) {
this.show = false
return
increment() {
if (this.selected + 0.1 > this.MAX_SPEED) return
var newPlaybackRate = this.selected + 0.1
this.selected = Number(newPlaybackRate.toFixed(1))
},
decrement() {
if (this.selected - 0.1 < this.MIN_SPEED) return
var newPlaybackRate = this.selected - 0.1
this.selected = Number(newPlaybackRate.toFixed(1))
},
closeMenu() {
if (this.currentPlaybackRate !== this.selected) {
this.$emit('change', this.selected)
}
this.selected = speed
this.show = false
this.$nextTick(() => this.$emit('change', speed))
},
clickedOption(rate) {
this.selected = Number(rate)
this.$nextTick(this.closeMenu)
}
},
mounted() {}
}
</script>
<style>
button.icon-num-btn:disabled {
cursor: not-allowed;
}
button.icon-num-btn:disabled::before {
background-color: rgba(0, 0, 0, 0.2);
}
button.icon-num-btn:disabled span {
color: #777;
}
</style>

View file

@ -0,0 +1,100 @@
<template>
<div ref="wrapper" v-click-outside="clickOutside">
<div @click.stop="toggleMenu">
<slot />
</div>
<transition name="menu">
<ul ref="menu" v-show="showMenu" class="absolute z-50 -mt-px bg-primary border border-gray-600 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-activedescendant="listbox-option-3" style="width: 160px">
<template v-for="item in items">
<nuxt-link :key="item.value" v-if="item.to" :to="item.to">
<li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
<div class="flex items-center px-2">
<span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
<span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
</div>
</li>
</nuxt-link>
<li v-else :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
<div class="flex items-center px-2">
<span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
<span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
</div>
</li>
</template>
</ul>
</transition>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
default: () => []
}
},
data() {
return {
menu: null,
showMenu: false
}
},
methods: {
toggleMenu() {
if (!this.showMenu) {
this.openMenu()
} else {
this.closeMenu()
}
},
openMenu() {
this.showMenu = true
this.$nextTick(() => {
if (!this.menu) this.unmountMountMenu()
this.recalcMenuPos()
})
},
closeMenu() {
this.showMenu = false
},
recalcMenuPos() {
if (!this.menu) return
var boundingBox = this.$refs.wrapper.getBoundingClientRect()
if (boundingBox.y > window.innerHeight - 8) {
// Input is off the page
return this.closeMenu()
}
var menuHeight = this.menu.clientHeight
var top = boundingBox.y + boundingBox.height - 4
if (top + menuHeight > window.innerHeight - 20) {
// Reverse menu to open upwards
top = boundingBox.y - menuHeight - 4
}
var left = boundingBox.x
if (left + this.menu.clientWidth > window.innerWidth - 20) {
// Shift left
left = boundingBox.x + boundingBox.width - this.menu.clientWidth
}
this.menu.style.top = top + 'px'
this.menu.style.left = left + 'px'
},
unmountMountMenu() {
if (!this.$refs.menu) return
this.menu = this.$refs.menu
this.menu.remove()
document.body.appendChild(this.menu)
},
clickOutside() {
this.closeMenu()
},
clickedOption(itemValue) {
this.$emit('action', itemValue)
this.closeMenu()
}
},
mounted() {}
}
</script>