groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-12 12:21:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add jump amounts to playback controls tooltips

Browse source
This commit is contained in:
Greg Lorenzen 2024-07-09 23:18:14 +00:00
parent 269f569f1f
commit 20153ac8d1
1 changed files with 25 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

29
client/components/player/PlayerPlaybackControls.vue
View file

@ -7,16 +7,16 @@
<span class="material-icons text-2xl sm:text-3xl">first_page</span> <span class="material-icons text-2xl sm:text-3xl">first_page</span>
</button> </button>
</ui-tooltip> </ui-tooltip>
<ui-tooltip direction="top" :text="$strings.ButtonJumpBackward"> <ui-tooltip direction="top" :text="jumpBackwardText">
<button :aria-label="$strings.ButtonJumpBackward" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward"> <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
<span class="material-icons text-2xl sm:text-3xl">replay</span> <span class="material-icons text-2xl sm:text-3xl">replay</span>
</button> </button>
</ui-tooltip> </ui-tooltip>
<button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 lg:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause"> <button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 lg:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
<span class="material-icons text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span> <span class="material-icons text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
</button> </button>
<ui-tooltip direction="top" :text="$strings.ButtonJumpForward"> <ui-tooltip direction="top" :text="jumpForwardText">
<button :aria-label="$strings.ButtonJumpForward" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward"> <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
<span class="material-icons text-2xl sm:text-3xl">forward_10</span> <span class="material-icons text-2xl sm:text-3xl">forward_10</span>
</button> </button>
</ui-tooltip> </ui-tooltip>
@ -56,6 +56,12 @@ export default {
set(val) { set(val) {
this.$emit('update:playbackRate', val) this.$emit('update:playbackRate', val)
} }
},
jumpForwardText() {
return this.getJumpText('jumpForwardAmount', 'Jump Forward')
},
jumpBackwardText() {
return this.getJumpText('jumpBackwardAmount', 'Jump Backward')
} }
}, },
methods: { methods: {
@ -83,6 +89,21 @@ export default {
this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => { this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
console.error('Failed to update settings', err) console.error('Failed to update settings', err)
}) })
},
getJumpText(setting, prefix) {
const amount = this.$store.getters['user/getUserSetting'](setting)
const minutes = Math.floor(amount / 60)
const seconds = amount % 60
let formattedTime = ''
if (minutes > 0) {
formattedTime += `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`
}
if (seconds > 0) {
formattedTime += ` ${seconds} seconds`
}
formattedTime = formattedTime.trim()
formattedTime = formattedTime.length > 0 ? `${prefix} - ${formattedTime}` : ''
return formattedTime
} }
}, },
mounted() {} mounted() {}