feat: add haptic feedback to all action buttons

pages/account.vue

@@ -23,6 +23,8 @@
 </template>
 
 <script>
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
 export default {
   asyncData({ redirect, store }) {
     if (!store.state.socketConnected) {
@@ -53,6 +55,7 @@ export default {
   },
   methods: {
     async logout() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       if (this.user) {
         await this.$axios.$post('/logout').catch((error) => {
           console.error(error)
@@ -68,4 +71,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

pages/item/_id.vue

@@ -142,6 +142,8 @@
 <script>
 import { Dialog } from '@capacitor/dialog'
 import { AbsFileSystem, AbsDownloader } from '@/plugins/capacitor'
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
 
 export default {
   async asyncData({ store, params, redirect, app }) {
@@ -406,8 +408,9 @@ export default {
     readBook() {
       this.$store.commit('openReader', this.libraryItem)
     },
-    playClick() {
+    async playClick() {
       var episodeId = null
+      await Haptics.impact({ style: ImpactStyle.Medium });
 
       if (this.isPodcast) {
         this.episodes.sort((a, b) => {
@@ -461,6 +464,7 @@ export default {
       this.$eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId })
     },
     async clearProgressClick() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       const { value } = await Dialog.confirm({
         title: 'Confirm',
         message: 'Are you sure you want to reset your progress?'
@@ -506,13 +510,14 @@ export default {
       this.showSelectLocalFolder = false
       this.download(localFolder)
     },
-    downloadClick() {
+    async downloadClick() {
       if (this.downloadItem) {
         return
       }
       if (!this.numTracks) {
         return
       }
+      await Haptics.impact({ style: ImpactStyle.Medium });
       if (this.isIos) {
         // no local folders on iOS
         this.startDownload()
@@ -580,6 +585,7 @@ export default {
       }
     },
     async toggleFinished() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.isProcessingReadUpdate = true
       if (this.isLocal) {
         var isFinished = !this.userIsFinished
@@ -647,4 +653,4 @@ export default {
   width: calc(100% - 64px);
   max-width: calc(100% - 64px);
 }
-</style>
+</style>

pages/localMedia/item/_id.vue

@@ -105,6 +105,7 @@ import draggable from 'vuedraggable'
 import { Capacitor } from '@capacitor/core'
 import { Dialog } from '@capacitor/dialog'
 import { AbsFileSystem } from '@/plugins/capacitor'
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
 
 export default {
   components: {
@@ -255,14 +256,16 @@ export default {
       }
       this.showDialog = true
     },
-    play() {
+    async play() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItemId })
     },
     getCapImageSrc(contentUrl) {
       return Capacitor.convertFileSrc(contentUrl)
     },
-    dialogAction(action) {
+    async dialogAction(action) {
       console.log('Dialog action', action)
+      await Haptics.impact({ style: ImpactStyle.Medium });
       if (action == 'scan') {
         this.scanItem()
       } else if (action == 'rescan') {
@@ -405,4 +408,4 @@ export default {
 .dragtrack-leave-active {
   position: absolute;
 }
-</style>
+</style>

pages/settings.vue

@@ -47,6 +47,7 @@
 
 <script>
 import { Dialog } from '@capacitor/dialog'
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
 
 export default {
   data() {
@@ -149,6 +150,7 @@ export default {
       this.saveSettings()
     },
     async saveSettings() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       const updatedDeviceData = await this.$db.updateDeviceSettings({ ...this.settings })
       console.log('Saved device data', updatedDeviceData)
       if (updatedDeviceData) {
@@ -176,4 +178,4 @@ export default {
     this.init()
   }
 }
-</script>
+</script>