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

client/components/modals/EditCollectionModal.vue

@@ -8,7 +8,10 @@
     <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
       <form @submit.prevent="submitForm">
         <div class="flex">
-          <covers-collection-cover :book-items="books" :width="200" :height="100 * 1.6" />
+          <div>
+            <covers-collection-cover :book-items="books" :width="200" :height="100 * 1.6" />
+            <!-- <ui-btn type="button" @click="showUploadImageModal = true">Upload</ui-btn> -->
+          </div>
           <div class="flex-grow px-4">
             <ui-text-input-with-label v-model="newCollectionName" label="Name" class="mb-2" />
 
@@ -21,6 +24,8 @@
           <ui-btn color="success" type="submit">Save</ui-btn>
         </div>
       </form>
+
+      <modals-upload-image-modal v-model="showUploadImageModal" entity="collection" :entity-id="collection.id" />
     </div>
   </modals-modal>
 </template>
@@ -31,7 +36,8 @@ export default {
     return {
       processing: false,
       newCollectionName: null,
-      newCollectionDescription: null
+      newCollectionDescription: null,
+      showUploadImageModal: false
     }
   },
   watch: {

client/components/modals/EditModal.vue

@@ -175,7 +175,6 @@ export default {
   },
   methods: {
     goPrevBook() {
-      console.log('GO PREV', this.currentBookshelfIndex)
       if (this.currentBookshelfIndex - 1 < 0) return
       var prevBookId = this.bookshelfBookIds[this.currentBookshelfIndex - 1]
       var prevBook = this.$store.getters['audiobooks/getAudiobook'](prevBookId)
@@ -187,7 +186,6 @@ export default {
       }
     },
     goNextBook() {
-      console.log('GO NEXT', this.currentBookshelfIndex)
       if (this.currentBookshelfIndex >= this.bookshelfBookIds.length - 1) return
 
       var nextBookId = this.bookshelfBookIds[this.currentBookshelfIndex + 1]
@@ -226,7 +224,6 @@ export default {
       }
     },
     hotkey(action) {
-      console.log('HOTKEY', action)
       if (action === this.$hotkeys.Modal.NEXT_PAGE) {
         this.goNextBook()
       } else if (action === this.$hotkeys.Modal.PREV_PAGE) {

client/components/modals/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-40 opacity-0">
+  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 items-center justify-center z-40 opacity-0 hidden">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
     <div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="clickClose">
@@ -47,7 +47,7 @@ export default {
   watch: {
     show(newVal) {
       if (newVal) {
-        this.setShow()
+        this.$nextTick(this.setShow)
       } else {
         this.setHide()
       }
@@ -77,9 +77,9 @@ export default {
     clickClose() {
       this.show = false
     },
-    clickBg(vm, ev) {
+    clickBg(ev) {
       if (this.processing && this.persistent) return
-      if (vm.srcElement.classList.contains('modal-bg')) {
+      if (ev.srcElement.classList.contains('modal-bg')) {
         this.show = false
       }
     },
@@ -89,6 +89,13 @@ export default {
       }
     },
     setShow() {
+      if (!this.el || !this.content) {
+        this.init()
+      }
+      if (!this.el || !this.content) {
+        return
+      }
+
       document.body.appendChild(this.el)
       setTimeout(() => {
         this.content.style.transform = 'scale(1)'
@@ -105,15 +112,22 @@ export default {
 
       this.$eventBus.$off('modal-hotkey', this.hotkey)
       this.$store.commit('setOpenModal', null)
+    },
+    init() {
+      this.el = this.$refs.wrapper
+      this.content = this.$refs.content
+      if (this.content && this.el) {
+        this.el.classList.remove('hidden')
+        this.el.classList.add('flex')
+        this.content.style.transform = 'scale(0)'
+        this.content.style.transition = 'transform 0.25s cubic-bezier(0.16, 1, 0.3, 1)'
+        this.el.style.opacity = 1
+        this.el.remove()
+      } else {
+        console.warn('Invalid modal init', this.name)
+      }
     }
   },
-  mounted() {
-    this.el = this.$refs.wrapper
-    this.content = this.$refs.content
-    this.content.style.transform = 'scale(0)'
-    this.content.style.transition = 'transform 0.25s cubic-bezier(0.16, 1, 0.3, 1)'
-    this.el.style.opacity = 1
-    this.el.remove()
-  }
+  mounted() {}
 }
 </script>

client/components/modals/UploadImageModal.vue

@@ -0,0 +1,107 @@
+<template>
+  <modals-modal v-model="show" name="upload-image" :width="500" :height="'unset'">
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div class="flex items-center">
+        <div class="w-40 pr-2 pt-4" style="min-width: 160px">
+          <ui-file-input ref="fileInput" @change="fileUploadSelected">Upload Cover</ui-file-input>
+        </div>
+        <form @submit.prevent="submitForm" class="flex flex-grow">
+          <ui-text-input-with-label v-model="imageUrl" label="Cover Image URL" />
+          <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-3 w-24">Update</ui-btn>
+        </form>
+      </div>
+      <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
+        <p class="text-lg">Preview Cover</p>
+        <span class="absolute top-4 right-4 material-icons text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
+        <div class="flex justify-center py-4">
+          <covers-preview-cover :src="previewUpload" :width="240" />
+        </div>
+        <div class="absolute bottom-0 right-0 flex py-4 px-5">
+          <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">Clear</ui-btn>
+          <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">Upload</ui-btn>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    entity: String,
+    entityId: String
+  },
+  data() {
+    return {
+      imageUrl: null,
+      previewUpload: null,
+      processingUpload: false
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (newVal) this.init()
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    init() {},
+    fileUploadSelected() {
+      this.previewUpload = URL.createObjectURL(file)
+      this.selectedFile = file
+    },
+    resetCoverPreview() {
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.reset()
+      }
+      this.previewUpload = null
+      this.selectedFile = null
+    },
+    submitCoverUpload() {
+      this.processingUpload = true
+      var form = new FormData()
+      form.set('cover', this.selectedFile)
+
+      this.$axios
+        .$post(`/api/${this.entity}/${this.entityId}/cover`, form)
+        .then((data) => {
+          if (data.error) {
+            this.$toast.error(data.error)
+          } else {
+            this.$toast.success('Cover Uploaded')
+            this.resetCoverPreview()
+          }
+          this.processingUpload = false
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
+          this.$toast.error(errorMsg)
+          this.processingUpload = false
+        })
+    },
+    async submitForm() {
+      this.processingUpload = true
+
+      var success = await this.$axios.$post(`/api/${this.entity}/${this.entityId}/cover`, { url: this.imageUrl }).catch((error) => {
+        console.error('Failed to download cover from url', error)
+        var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
+        this.$toast.error(errorMsg)
+        return false
+      })
+
+      this.processingUpload = false
+    }
+  }
+}
+</script>

client/components/modals/edit-tabs/Details.vue

@@ -2,16 +2,6 @@
   <div class="w-full h-full relative">
     <form class="w-full h-full" @submit.prevent="submitForm">
       <div ref="formWrapper" class="px-4 py-6 details-form-wrapper w-full overflow-hidden overflow-y-auto">
-        <!-- <div v-if="userProgress" class="bg-success bg-opacity-40 rounded-md w-full px-4 py-1 mb-4 border border-success border-opacity-50">
-        <div class="w-full flex items-center">
-          <p>
-            Your progress: <span class="font-mono text-lg">{{ (userProgress * 100).toFixed(0) }}%</span>
-          </p>
-          <div class="flex-grow" />
-          <ui-btn v-if="!resettingProgress" small :padding-x="2" class="-mr-3" @click="resetProgress">Reset</ui-btn>
-        </div>
-      </div> -->
-
         <ui-text-input-with-label v-model="details.title" label="Title" />
 
         <ui-text-input-with-label v-model="details.subtitle" label="Subtitle" class="mt-2" />
@@ -278,7 +268,6 @@ export default {
     }
   },
   mounted() {
-    // this.init()
     this.setResizeObserver()
   }
 }

client/components/modals/libraries/EditLibrary.vue

@@ -60,9 +60,6 @@ export default {
       }
       var newfolderpaths = this.folderPaths.join(',')
       var origfolderpaths = this.library.folders.map((f) => f.fullPath).join(',')
-      console.log(newfolderpaths)
-      console.log(origfolderpaths)
-      console.log(newfolderpaths === origfolderpaths)
 
       return newfolderpaths === origfolderpaths && this.name === this.library.name
     }
@@ -158,7 +155,6 @@ export default {
     }
   },
   mounted() {
-    console.log('Mounted edit library')
     this.init()
   }
 }

client/components/modals/libraries/FolderChooser.vue

@@ -148,7 +148,6 @@ export default {
     }
   },
   mounted() {
-    console.log('folder chooser mounted')
     this.init()
   }
 }