New data model update bookmarks and bookmark routes to use API

client/components/app/StreamContainer.vue

@@ -24,7 +24,6 @@
       <div class="flex-grow" />
       <span class="material-icons px-2 py-1 md:p-4 cursor-pointer" @click="closePlayer">close</span>
     </div>
-
     <audio-player
       ref="audioPlayer"
       :chapters="chapters"
@@ -44,7 +43,7 @@
       @showSleepTimer="showSleepTimerModal = true"
     />
 
-    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :audiobook-id="bookmarkAudiobookId" :current-time="bookmarkCurrentTime" @select="selectBookmark" />
+    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :library-item-id="libraryItemId" @select="selectBookmark" />
 
     <modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-time="sleepTimerTime" :remaining="sleepTimerRemaining" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />
   </div>
@@ -60,7 +59,6 @@ export default {
       totalDuration: 0,
       showBookmarksModal: false,
       bookmarkCurrentTime: 0,
-      bookmarkAudiobookId: null,
       playerLoading: false,
       isPlaying: false,
       currentTime: 0,
@@ -103,9 +101,8 @@ export default {
       return this.userLibraryItemProgress ? this.userLibraryItemProgress.currentTime || 0 : 0
     },
     bookmarks() {
-      return []
-      // if (!this.userAudiobook) return []
-      // return (this.userAudiobook.bookmarks || []).map((bm) => ({ ...bm })).sort((a, b) => a.time - b.time)
+      if (!this.libraryItemId) return []
+      return this.$store.getters['user/getUserBookmarksForItem'](this.libraryItemId)
     },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
@@ -215,7 +212,6 @@ export default {
       }
     },
     showBookmarks() {
-      this.bookmarkAudiobookId = this.libraryItemId
       this.bookmarkCurrentTime = this.currentTime
       this.showBookmarksModal = true
     },

client/components/modals/BookmarksModal.vue

@@ -39,7 +39,7 @@ export default {
       type: Number,
       default: 0
     },
-    audiobookId: String
+    libraryItemId: String
   },
   data() {
     return {
@@ -76,8 +76,15 @@ export default {
       this.showBookmarkTitleInput = true
     },
     deleteBookmark(bm) {
-      var bookmark = { ...bm, audiobookId: this.audiobookId }
-      this.$root.socket.emit('delete_bookmark', bookmark)
+      this.$axios
+        .$delete(`/api/me/item/${this.libraryItemId}/bookmark/${bm.time}`)
+        .then(() => {
+          this.$toast.success('Bookmark removed')
+        })
+        .catch((error) => {
+          this.$toast.error(`Failed to remove bookmark`)
+          console.error(error)
+        })
       this.show = false
     },
     clickBookmark(bm) {
@@ -85,9 +92,15 @@ export default {
     },
     submitUpdateBookmark(updatedBookmark) {
       var bookmark = { ...updatedBookmark }
-      bookmark.audiobookId = this.audiobookId
-
-      this.$root.socket.emit('update_bookmark', bookmark)
+      this.$axios
+        .$patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
+        .then(() => {
+          this.$toast.success('Bookmark updated')
+        })
+        .catch((error) => {
+          this.$toast.error(`Failed to update bookmark`)
+          console.error(error)
+        })
       this.show = false
     },
     submitCreateBookmark() {
@@ -95,11 +108,18 @@ export default {
         this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
       }
       var bookmark = {
-        audiobookId: this.audiobookId,
         title: this.newBookmarkTitle,
-        time: this.currentTime
+        time: Math.floor(this.currentTime)
       }
-      this.$root.socket.emit('create_bookmark', bookmark)
+      this.$axios
+        .$post(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
+        .then(() => {
+          this.$toast.success('Bookmark added')
+        })
+        .catch((error) => {
+          this.$toast.error(`Failed to create bookmark`)
+          console.error(error)
+        })
 
       this.newBookmarkTitle = ''
       this.showBookmarkTitleInput = false