Add:Send ebook to device button #909

components/connection/ServerConnectForm.vue

@@ -400,12 +400,13 @@ export default {
         this.setUserAndConnection(payload)
       }
     },
-    async setUserAndConnection({ user, userDefaultLibraryId, serverSettings }) {
+    async setUserAndConnection({ user, userDefaultLibraryId, serverSettings, ereaderDevices }) {
       if (!user) return
 
       console.log('Successfully logged in', JSON.stringify(user))
 
       this.$store.commit('setServerSettings', serverSettings)
+      this.$store.commit('libraries/setEReaderDevices', ereaderDevices)
 
       // Set library - Use last library if set and available fallback to default user library
       var lastLibraryId = await this.$localStore.getLastLibraryId()

components/modals/Dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <modals-modal v-model="show" :width="width" height="100%">
     <template #outer>
-      <div v-if="title" class="absolute top-8 left-4 z-40" style="max-width: 80%">
+      <div v-if="title" class="absolute top-10 left-4 z-40 pt-1 pb-1.5" style="max-width: 80%">
         <p class="text-white text-xl truncate">{{ title }}</p>
       </div>
     </template>

layouts/default.vue

@@ -152,8 +152,9 @@ export default {
         return
       }
 
-      const { user, userDefaultLibraryId, serverSettings } = authRes
+      const { user, userDefaultLibraryId, serverSettings, ereaderDevices } = authRes
       this.$store.commit('setServerSettings', serverSettings)
+      this.$store.commit('libraries/setEReaderDevices', ereaderDevices)
 
       // Set library - Use last library if set and available fallback to default user library
       const lastLibraryId = await this.$localStore.getLastLibraryId()

pages/item/_id/index.vue

@@ -129,11 +129,16 @@
       <modals-select-local-folder-modal v-model="showSelectLocalFolder" :media-type="mediaType" @select="selectedLocalFolder" />
 
       <modals-dialog v-model="showMoreMenu" :items="moreMenuItems" @action="moreMenuAction" />
+      <modals-dialog v-model="showSendEbookDevicesModal" title="Select a device" :items="ereaderDeviceItems" @action="sendEbookToDeviceAction" />
 
       <modals-item-details-modal v-model="showDetailsModal" :library-item="libraryItem" />
 
       <modals-fullscreen-cover v-model="showFullscreenCover" :library-item="libraryItem" />
     </div>
+
+    <div v-show="processing" class="fixed top-0 left-0 w-screen h-screen flex items-center justify-center bg-black/50 z-50">
+      <ui-loading-indicator />
+    </div>
   </div>
 </template>
 
@@ -175,11 +180,13 @@ export default {
   },
   data() {
     return {
+      processing: false,
       resettingProgress: false,
       isProcessingReadUpdate: false,
       showSelectLocalFolder: false,
       showMoreMenu: false,
       showDetailsModal: false,
+      showSendEbookDevicesModal: false,
       showFullscreenCover: false,
       coverRgb: 'rgb(55, 56, 56)',
       coverBgIsLight: false,
@@ -430,6 +437,14 @@ export default {
           value: 'playlist',
           icon: 'playlist_add'
         })
+
+        if (this.ebookFile && this.$store.state.libraries.ereaderDevices?.length) {
+          items.push({
+            text: 'Send ebook to device',
+            value: 'sendEbook',
+            icon: 'send'
+          })
+        }
       }
 
       if (this.showRSSFeedOption) {
@@ -464,6 +479,15 @@ export default {
 
       return items
     },
+    ereaderDeviceItems() {
+      if (!this.ebookFile || !this.$store.state.libraries.ereaderDevices?.length) return []
+      return this.$store.state.libraries.ereaderDevices.map((d) => {
+        return {
+          text: d.name,
+          value: d.name
+        }
+      })
+    },
     coverWidth() {
       let width = this.windowWidth - 94
       if (width > 325) return 325
@@ -543,8 +567,31 @@ export default {
         this.deleteLocalItem()
       } else if (action === 'rssFeed') {
         this.clickRSSFeed()
+      } else if (action === 'sendEbook') {
+        this.showSendEbookDevicesModal = true
       }
     },
+    sendEbookToDeviceAction(deviceName) {
+      this.showSendEbookDevicesModal = false
+
+      const payload = {
+        libraryItemId: this.serverLibraryItemId,
+        deviceName
+      }
+      this.processing = true
+      this.$nativeHttp
+        .post(`/api/emails/send-ebook-to-device`, payload)
+        .then(() => {
+          this.$toast.success('Ebook sent successfully')
+        })
+        .catch((error) => {
+          console.error('Failed to send ebook to device', error)
+          this.$toast.error('Failed to send ebook to device')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
     clickRSSFeed() {
       this.$store.commit('globals/setRSSFeedOpenCloseModal', {
         id: this.serverLibraryItemId,
@@ -555,6 +602,7 @@ export default {
       })
     },
     moreButtonPress() {
+      this.showSendEbookDevicesModal = false
       this.showMoreMenu = true
     },
     readBook() {

store/libraries.js

@@ -7,7 +7,8 @@ export const state = () => ({
   showModal: false,
   issues: 0,
   filterData: null,
-  numUserPlaylists: 0
+  numUserPlaylists: 0,
+  ereaderDevices: []
 })
 
 export const getters = {
@@ -177,5 +178,8 @@ export const mutations = {
         if (genre && !state.filterData.genres.includes(genre)) state.filterData.genres.push(genre)
       })
     }
+  },
+  setEReaderDevices(state, ereaderDevices) {
+    state.ereaderDevices = ereaderDevices
   }
 }