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

Add playback settings UI for jump forwards and jump backwards

Browse source
This commit is contained in:
Greg Lorenzen 2024-07-03 00:59:27 +00:00
parent 3f59c76a4d
commit 440198a763
1 changed files with 41 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

41
client/pages/config/index.vue
View file

@ -94,6 +94,29 @@
</p>
</ui-tooltip>
</div>
<div class="pt-4">
<h2 class="font-semibold">{{ $strings.HeaderSettingsPlayback }}</h2>
</div>
<div class="flex items-center py-2">
<ui-icon-btn @click="toggleJumpBackwards" :icon="currentJumpBackwardsIcon" iconFontSize="35px" :size="50" />
<ui-tooltip :text="$strings.LabelSettingsJumpBackwardsTimeHelp">
<p class="pl-4">
<span id="settings-jump-backwards-time">{{ $strings.LabelSettingsJumpBackwardsTime }}</span>
<span class="material-icons icon-text">info_outlined</span>
</p>
</ui-tooltip>
</div>
<div class="flex items-center py-2">
<ui-icon-btn @click="toggleJumpForwards" :icon="currentJumpForwardsIcon" iconFontSize="35px" :size="50" />
<ui-tooltip :text="$strings.LabelSettingsJumpForwardsTimeHelp">
<p class="pl-4">
<span id="settings-jump-forwards-time">{{ $strings.LabelSettingsJumpForwardsTime }}</span>
<span class="material-icons icon-text">info_outlined</span>
</p>
</ui-tooltip>
</div>
</div>
<div class="flex-1">
@ -228,6 +251,12 @@ export default {
homepageUseBookshelfView: false,
useBookshelfView: false,
scannerEnableWatcher: false,
jumpForwardsTime: 10,
jumpForwardsIcons: ['forward_10', 'forward_30', 'forward_5'],
currentJumpForwardsIndex: 0,
jumpBackwardsTime: 10,
jumpBackwardsIcons: ['replay_10', 'replay_30', 'replay_5'],
currentJumpBackwardsIndex: 0,
isPurgingCache: false,
hasPrefixesChanged: false,
newServerSettings: {},
@ -262,6 +291,12 @@ export default {
timeExample() {
const date = new Date(2014, 2, 25, 17, 30, 0)
return this.$formatJsTime(date, this.newServerSettings.timeFormat)
},
currentJumpForwardsIcon() {
return this.jumpForwardsIcons[this.currentJumpForwardsIndex]
},
currentJumpBackwardsIcon() {
return this.jumpBackwardsIcons[this.currentJumpBackwardsIndex]
}
},
methods: {
@ -271,6 +306,12 @@ export default {
const serverPrefixes = this.serverSettings.sortingPrefixes || []
this.hasPrefixesChanged = prefixes.some((p) => !serverPrefixes.includes(p)) || serverPrefixes.some((p) => !prefixes.includes(p))
},
toggleJumpForwards() {
this.currentJumpForwardsIndex = (this.currentJumpForwardsIndex + 1) % this.jumpForwardsIcons.length
},
toggleJumpBackwards() {
this.currentJumpBackwardsIndex = (this.currentJumpBackwardsIndex + 1) % this.jumpBackwardsIcons.length
},
updateSortingPrefixes() {
const prefixes = [...new Set(this.newServerSettings.sortingPrefixes.map((prefix) => prefix.trim().toLowerCase()) || [])]
if (!prefixes.length) {