Fix bookmarks and hide for local items #137

components/app/AudioPlayer.vue

@@ -43,7 +43,7 @@
     <div id="streamContainer" class="w-full z-20 bg-primary absolute bottom-0 left-0 right-0 p-2 pointer-events-auto transition-all" @click="clickContainer">
       <div v-if="showFullscreen" class="absolute top-0 left-0 right-0 w-full py-3 mx-auto px-3" style="max-width: 380px">
         <div class="flex items-center justify-between pointer-events-auto">
-          <span v-if="!isPodcast" class="material-icons text-3xl text-white text-opacity-75 cursor-pointer" @click="$emit('showBookmarks')">{{ bookmarks.length ? 'bookmark' : 'bookmark_border' }}</span>
+          <span v-if="!isPodcast && !isLocalPlayMethod" class="material-icons text-3xl text-white text-opacity-75 cursor-pointer" @click="$emit('showBookmarks')">{{ bookmarks.length ? 'bookmark' : 'bookmark_border' }}</span>
           <!-- hidden for podcasts but still using this as a placeholder -->
           <span v-else class="material-icons text-3xl text-white text-opacity-0">bookmark</span>
 

components/app/AudioPlayerContainer.vue

@@ -4,7 +4,7 @@
 
     <modals-playback-speed-modal v-model="showPlaybackSpeedModal" :playback-rate.sync="playbackSpeed" @update:playbackRate="updatePlaybackSpeed" @change="changePlaybackSpeed" />
     <modals-sleep-timer-modal v-model="showSleepTimerModal" :current-time="sleepTimeRemaining" :sleep-timer-running="isSleepTimerRunning" :current-end-of-chapter-time="currentEndOfChapterTime" @change="selectSleepTimeout" @cancel="cancelSleepTimer" @increase="increaseSleepTimer" @decrease="decreaseSleepTimer" />
-    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="currentTime" @select="selectBookmark" />
+    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="currentTime" :library-item-id="serverLibraryItemId" @select="selectBookmark" />
   </div>
 </template>
 
@@ -31,7 +31,8 @@ export default {
       onSleepTimerSetListener: null,
       onMediaPlayerChangedListener: null,
       sleepInterval: null,
-      currentEndOfChapterTime: 0
+      currentEndOfChapterTime: 0,
+      serverLibraryItemId: null
     }
   },
   watch: {
@@ -44,8 +45,8 @@ export default {
   },
   computed: {
     bookmarks() {
-      // return this.$store.getters['user/getUserBookmarksForItem'](this.)
+      if (!this.serverLibraryItemId) return []
-      return []
+      return this.$store.getters['user/getUserBookmarksForItem'](this.serverLibraryItemId)
     },
     socketConnected() {
       return this.$store.state.socketConnected
@@ -181,10 +182,15 @@ export default {
         }
       }
 
+      this.serverLibraryItemId = null
+
       console.log('Called playLibraryItem', libraryItemId)
       AbsAudioPlayer.prepareLibraryItem({ libraryItemId, episodeId, playWhenReady: true })
         .then((data) => {
           console.log('Library item play response', JSON.stringify(data))
+          if (!libraryItemId.startsWith('local')) {
+            this.serverLibraryItemId = libraryItemId
+          }
         })
         .catch((error) => {
           console.error('Failed', error)

components/modals/BookmarksModal.vue

@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import { Dialog } from '@capacitor/dialog'
 export default {
   props: {
     value: Boolean,
@@ -56,7 +57,7 @@ export default {
       type: Number,
       default: 0
     },
-    audiobookId: String
+    libraryItemId: String
   },
   data() {
     return {
@@ -96,40 +97,78 @@ export default {
       this.newBookmarkTitle = bm.title
       this.showBookmarkTitleInput = true
     },
-    deleteBookmark(bm) {
+    async deleteBookmark(bm) {
-      var bookmark = { ...bm, audiobookId: this.audiobookId }
+      const { value } = await Dialog.confirm({
-      this.$server.socket.emit('delete_bookmark', bookmark)
+        title: 'Remove Bookmark',
+        message: `Are you sure you want to remove bookmark?`
+      })
+      if (!value) return
+
+      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) {
       this.$emit('select', bm)
     },
+    submitUpdateBookmark(updatedBookmark) {
+      var bookmark = { ...updatedBookmark }
+      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() {
+      if (!this.newBookmarkTitle) {
+        this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
+      }
+      var bookmark = {
+        title: this.newBookmarkTitle,
+        time: Math.floor(this.currentTime)
+      }
+      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
+
+      this.show = false
+    },
     createBookmark() {
       this.selectedBookmark = null
       this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
       this.showBookmarkTitleInput = true
     },
     submitBookmark() {
-      console.log(`[BookmarksModal] Submit Bookmark ${this.newBookmarkTitle}/${this.audiobookId}`)
       if (this.selectedBookmark) {
-        if (this.selectedBookmark.title !== this.newBookmarkTitle) {
+        var updatePayload = {
-          var bookmark = { ...this.selectedBookmark }
+          ...this.selectedBookmark,
-          bookmark.audiobookId = this.audiobookId
+          title: this.newBookmarkTitle
-          bookmark.title = this.newBookmarkTitle
-          console.log(`[BookmarksModal] Update Bookmark ${JSON.stringify(bookmark)}`)
-          this.$server.socket.emit('update_bookmark', bookmark)
         }
+        this.submitUpdateBookmark(updatePayload)
       } else {
-        var bookmark = {
+        this.submitCreateBookmark()
-          audiobookId: this.audiobookId,
-          title: this.newBookmarkTitle,
-          time: this.currentTime
       }
-        console.log(`[BookmarksModal] Create Bookmark ${JSON.stringify(bookmark)}`)
-        this.$server.socket.emit('create_bookmark', bookmark)
-      }
-      this.newBookmarkTitle = ''
-      this.showBookmarkTitleInput = false
-      this.show = false
     }
   },
   mounted() {}

components/modals/bookmarks/BookmarkItem.vue

@@ -1,11 +1,11 @@
 <template>
-  <div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-4 py-4 justify-start cursor-pointer hover:bg-bg relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click">
+  <div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-3 py-4 justify-start cursor-pointer hover:bg-bg relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click">
-    <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-60'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span>
+    <span class="material-icons text-xl" :class="highlight ? 'text-success' : 'text-white text-opacity-60'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span>
     <div class="flex-grow overflow-hidden">
-      <p class="pl-2 pr-2 truncate">{{ bookmark.title }}</p>
+      <p class="pl-2 pr-2 truncate text-sm">{{ bookmark.title }}</p>
     </div>
-    <div class="h-full flex items-center w-16 justify-end">
+    <div class="h-full flex items-center w-14 justify-end">
-      <span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(bookmark.time) }}</span>
+      <span class="font-mono text-xs text-gray-300">{{ $secondsToTimestamp(bookmark.time) }}</span>
     </div>
     <div class="h-full flex items-center justify-end transform w-16">
       <span class="material-icons text-lg mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>