Add: Sortable collection books, play from collections, collection book table row updates #151

client/components/tables/CollectionBooksTable.vue

@@ -8,10 +8,10 @@
       <div class="flex-grow" />
       <p v-if="totalDuration">{{ totalDurationPretty }}</p>
     </div>
-    <draggable v-model="books" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
-      <transition-group type="transition" :name="!drag ? 'list-complete' : null">
-        <template v-for="book in books">
-          <tables-collection-book-table-row :key="book.id" :book="book" :collection-id="collectionId" class="item list-complete-item" @edit="editBook" />
+    <draggable v-model="booksCopy" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
+      <transition-group type="transition" :name="!drag ? 'collection-book' : null">
+        <template v-for="book in booksCopy">
+          <tables-collection-book-table-row :key="book.id" :is-dragging="drag" :book="book" :collection-id="collectionId" class="item" :class="drag ? '' : 'collection-book-item'" @edit="editBook" />
         </template>
       </transition-group>
     </draggable>
@@ -39,6 +39,14 @@ export default {
         animation: 200,
         group: 'description',
         ghostClass: 'ghost'
+      },
+      booksCopy: []
+    }
+  },
+  watch: {
+    books: {
+      handler(newVal) {
+        this.init()
       }
     }
   },
@@ -55,29 +63,47 @@ export default {
     }
   },
   methods: {
-    draggableUpdate() {},
+    draggableUpdate() {
+      var collectionUpdate = {
+        books: this.booksCopy.map((b) => b.id)
+      }
+      this.$axios
+        .$patch(`/api/collection/${this.collectionId}`, collectionUpdate)
+        .then((collection) => {
+          console.log('Collection updated', collection)
+        })
+        .catch((error) => {
+          console.error('Failed to update collection', error)
+          this.$toast.error('Failed to save collection books order')
+        })
+    },
     editBook(book) {
       var bookIds = this.books.map((b) => b.id)
       this.$store.commit('setBookshelfBookIds', bookIds)
       this.$store.commit('showEditModal', book)
+    },
+    init() {
+      this.booksCopy = this.books.map((b) => ({ ...b }))
     }
   },
-  mounted() {}
+  mounted() {
+    this.init()
+  }
 }
 </script>
 
 <style>
-.list-complete-item {
-  transition: all 0.8s ease;
+.collection-book-item {
+  transition: all 0.4s ease;
 }
 
-.list-complete-enter-from,
-.list-complete-leave-to {
+.collection-book-enter-from,
+.collection-book-leave-to {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateX(30px);
 }
 
-.list-complete-leave-active {
+.collection-book-leave-active {
   position: absolute;
 }
 </style>

client/components/tables/collection/BookTableRow.vue

@@ -6,11 +6,18 @@
           <span class="material-icons drag-handle text-xl">menu</span>
         </div>
       </div>
-      <covers-book-cover :audiobook="book" :width="50" />
+      <div class="h-full relative" :style="{ width: '50px' }">
+        <covers-book-cover :audiobook="book" :width="50" />
+        <div class="absolute top-0 left-0 bg-black bg-opacity-50 flex items-center justify-center h-full w-full" v-show="isHovering && showPlayBtn">
+          <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-40 cursor-pointer" @click="playClick">
+            <span class="material-icons">play_arrow</span>
+          </div>
+        </div>
+      </div>
       <div class="w-80 h-full px-2 flex items-center">
         <div>
-          <p class="truncate">{{ bookTitle }}</p>
-          <p class="truncate text-gray-400 text-sm">{{ bookAuthor }}</p>
+          <nuxt-link :to="`/audiobook/${book.id}`" class="truncate hover:underline">{{ bookTitle }}</nuxt-link>
+          <nuxt-link :to="`/library/${book.libraryId}/bookshelf?filter=authors.${$encode(bookAuthor)}`" class="truncate block text-gray-400 text-sm hover:underline">{{ bookAuthor }}</nuxt-link>
         </div>
       </div>
       <div class="flex-grow flex items-center">
@@ -26,12 +33,12 @@
         <span class="material-icons">edit</span>
       </div>
     </div> -->
-    <div class="w-40 absolute top-0 -right-40 h-full transform transition-transform" :class="!isHovering ? 'translate-x-0' : '-translate-x-40'">
+    <div class="w-40 absolute top-0 -right-24 h-full transform transition-transform" :class="!isHovering ? 'translate-x-0' : '-translate-x-24'">
       <div class="flex h-full items-center">
         <ui-tooltip :text="isRead ? 'Mark as Not Read' : 'Mark as Read'" direction="top">
           <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="isRead" borderless class="mx-1 mt-0.5" @click="toggleRead" />
         </ui-tooltip>
-        <div class="mx-1">
+        <div class="mx-1" :class="isHovering ? '' : 'ml-6'">
           <ui-icon-btn icon="edit" borderless @click="clickEdit" />
         </div>
         <div class="mx-1">
@@ -49,7 +56,8 @@ export default {
     book: {
       type: Object,
       default: () => {}
-    }
+    },
+    isDragging: Boolean
   },
   data() {
     return {
@@ -64,6 +72,13 @@ export default {
       handler(newVal) {
         this.isRead = newVal
       }
+    },
+    isDragging: {
+      handler(newVal) {
+        if (newVal) {
+          this.isHovering = false
+        }
+      }
     }
   },
   computed: {
@@ -79,6 +94,21 @@ export default {
     bookDuration() {
       return this.$secondsToTimestamp(this.book.duration)
     },
+    isMissing() {
+      return this.book.isMissing
+    },
+    isIncomplete() {
+      return this.book.isIncomplete
+    },
+    numTracks() {
+      return this.book.numTracks
+    },
+    isStreaming() {
+      return this.$store.getters['getAudiobookIdStreaming'] === this.book.id
+    },
+    showPlayBtn() {
+      return !this.isMissing && !this.isIncomplete && !this.isStreaming && this.numTracks
+    },
     userAudiobooks() {
       return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
     },
@@ -91,12 +121,16 @@ export default {
   },
   methods: {
     mouseover() {
+      if (this.isDragging) return
       this.isHovering = true
     },
     mouseleave() {
       this.isHovering = false
     },
-    clickRemove() {},
+    playClick() {
+      this.$store.commit('setStreamAudiobook', this.book)
+      this.$root.socket.emit('open_stream', this.book.id)
+    },
     clickEdit() {
       this.$emit('edit', this.book)
     },