mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2026-07-28 23:48:45 +02:00
Expand time interval options for Make jump controls
Fixes #1445 - Added additional options for customizing jump forward/backward. Instead of just 5, 10, and 30 seconds, we now have 5s, 10s, 15s, 30s, 60s, 2m, and 5m. - Switched the jump interval to a list in the settings menu for better UX - Reordered "Disable auto rewind time" for aesthetics in settings menu (it looked out of place after backwards time and forwards time were turned to dropdowns The only downside of this (afaict), and what created the biggest challenge, is the lack of numeric glyphs in the Material Symbols font. They only have 5, 10, and 30, which we were previously using. Given that they don't have others, that means we had to change strategies for displaying. I switched all to generic backward and forward icons and added the time interval as a label next to it so the user can still tell at a glance what the setting is. For consistency we don't use the numbered glyphs anymore. For more info on the Material Symbols font, see: https://fonts.google.com/icons?icon.query=forward However this does feel like two steps forward, one step back, though I can't think of good options. Other possibility would be to create SVGs, though I'm not skilled enough to do that. Personally this feels like a good compromise, but others will probably differ. I considered using the numbered glyphs when the selected value was 5, 10, or 30, but when testing I found the inconsistency jarring and kind of janky.
This commit is contained in:
@@ -70,14 +70,20 @@
|
||||
<div id="playerControls" class="absolute right-0 bottom-0 mx-auto" style="max-width: 414px">
|
||||
<div class="flex items-center max-w-full" :class="playerSettings.lockUi ? 'justify-center' : 'justify-between'">
|
||||
<span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
|
||||
<span v-show="!playerSettings.lockUi" class="material-symbols jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">{{ jumpBackwardsIcon }}</span>
|
||||
<div v-show="!playerSettings.lockUi" class="jump-icon text-fg cursor-pointer flex items-center space-x-1" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">
|
||||
<span class="material-symbols">{{ jumpBackwardsItem.icon }}</span>
|
||||
<span class="text-xs font-semibold leading-none">{{ jumpBackwardsItem.label }}</span>
|
||||
</div>
|
||||
<div class="play-btn cursor-pointer shadow-sm flex items-center justify-center rounded-full text-primary mx-4 relative overflow-hidden" :style="{ backgroundColor: coverRgb }" :class="{ 'animate-spin': seekLoading }" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
|
||||
<div v-if="!coverBgIsLight" class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-20 pointer-events-none" />
|
||||
|
||||
<span v-if="!isLoading" class="material-symbols fill" :class="{ 'text-white': coverRgb && !coverBgIsLight }">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
|
||||
<widgets-spinner-icon v-else class="h-8 w-8" />
|
||||
</div>
|
||||
<span v-show="!playerSettings.lockUi" class="material-symbols jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">{{ jumpForwardIcon }}</span>
|
||||
<div v-show="!playerSettings.lockUi" class="jump-icon text-fg cursor-pointer flex items-center space-x-1" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">
|
||||
<span class="material-symbols">{{ jumpForwardItem.icon }}</span>
|
||||
<span class="text-xs font-semibold leading-none">{{ jumpForwardItem.label }}</span>
|
||||
</div>
|
||||
<span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -221,11 +227,11 @@ export default {
|
||||
|
||||
return items
|
||||
},
|
||||
jumpForwardIcon() {
|
||||
return this.$store.getters['globals/getJumpForwardIcon'](this.jumpForwardTime)
|
||||
jumpForwardItem() {
|
||||
return this.$store.getters['globals/getJumpForwardItem'](this.jumpForwardTime)
|
||||
},
|
||||
jumpBackwardsIcon() {
|
||||
return this.$store.getters['globals/getJumpBackwardsIcon'](this.jumpBackwardsTime)
|
||||
jumpBackwardsItem() {
|
||||
return this.$store.getters['globals/getJumpBackwardsItem'](this.jumpBackwardsTime)
|
||||
},
|
||||
jumpForwardTime() {
|
||||
return this.$store.getters['getJumpForwardTime']
|
||||
@@ -1080,8 +1086,10 @@ export default {
|
||||
#playerControls {
|
||||
transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
|
||||
transition-property: width, bottom;
|
||||
width: 128px;
|
||||
padding-right: 24px;
|
||||
width: auto;
|
||||
min-width: 150px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
bottom: 70px;
|
||||
}
|
||||
#playerControls .jump-icon {
|
||||
|
||||
Reference in New Issue
Block a user