mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-13 10:55:05 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 13

Update bookmark modal scrollable with create always visible, make UI consistent, hide create when bookmark already exists

Browse source
This commit is contained in:
advplyr 2025-01-16 16:56:56 -06:00
parent 6057930507
commit 2463c62bbf
28 changed files with 29 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

41
client/components/modals/BookmarksModal.vue
View file

@ -5,24 +5,26 @@
<p class="text-3xl text-white truncate">{{ $strings.LabelYourBookmarks }}</p>
</div>
</template>
<div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
<div v-if="show" class="w-full h-full">
<div class="w-full rounded-lg bg-bg box-shadow-md relative" style="max-height: 80vh">
<div v-if="bookmarks.length" class="h-full max-h-[calc(80vh-60px)] w-full relative overflow-y-auto overflow-x-hidden">
<template v-for="bookmark in bookmarks">
<modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" @click="clickBookmark" @update="submitUpdateBookmark" @delete="deleteBookmark" />
<modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" @click="clickBookmark" @delete="deleteBookmark" />
</template>
<div v-if="!bookmarks.length" class="flex h-32 items-center justify-center">
<p class="text-xl">{{ $strings.MessageNoBookmarks }}</p>
</div>
<div v-if="!hideCreate" class="w-full h-px bg-white bg-opacity-10" />
<form v-if="!hideCreate" @submit.prevent="submitCreateBookmark">
<div v-show="canCreateBookmark" class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
</div>
<div v-else class="flex h-32 items-center justify-center">
<p class="text-xl">{{ $strings.MessageNoBookmarks }}</p>
</div>
<div v-if="canCreateBookmark" class="w-full border-t border-white/10">
<form @submit.prevent="submitCreateBookmark">
<div class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
<div class="w-16 max-w-16 text-center">
<p class="text-sm font-mono text-gray-400">
{{ this.$secondsToTimestamp(currentTime) }}
</p>
</div>
<div class="flex-grow px-2">
<ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
<ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full h-10" />
</div>
<ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-symbols text-2xl -mt-px">add</span></ui-btn>
</div>
@ -44,8 +46,7 @@ export default {
type: Number,
default: 0
},
libraryItemId: String,
hideCreate: Boolean
libraryItemId: String
},
data() {
return {
@ -57,6 +58,7 @@ export default {
watch: {
show(newVal) {
if (newVal) {
this.selectedBookmark = null
this.showBookmarkTitleInput = false
this.newBookmarkTitle = ''
}
@ -72,7 +74,7 @@ export default {
}
},
canCreateBookmark() {
return !this.bookmarks.find((bm) => bm.time === this.currentTime)
return !this.bookmarks.find((bm) => Math.abs(this.currentTime - bm.time) < 1)
},
dateFormat() {
return this.$store.state.serverSettings.dateFormat
@ -102,19 +104,6 @@ export default {
clickBookmark(bm) {
this.$emit('select', bm)
},
submitUpdateBookmark(updatedBookmark) {
var bookmark = { ...updatedBookmark }
this.$axios
.$patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
.then(() => {
this.$toast.success(this.$strings.ToastBookmarkUpdateSuccess)
})
.catch((error) => {
this.$toast.error(this.$strings.ToastFailedToUpdate)
console.error(error)
})
this.show = false
},
submitCreateBookmark() {
if (!this.newBookmarkTitle) {
this.newBookmarkTitle = this.$formatDatetime(Date.now(), this.dateFormat, this.timeFormat)