feat: add haptic feedback to all action buttons

components/modals/BookmarksModal.vue

@@ -46,6 +46,8 @@
 
 <script>
 import { Dialog } from '@capacitor/dialog'
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
 export default {
   props: {
     value: Boolean,
@@ -94,6 +96,7 @@ export default {
       this.showBookmarkTitleInput = true
     },
     async deleteBookmark(bm) {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       const { value } = await Dialog.confirm({
         title: 'Remove Bookmark',
         message: `Are you sure you want to remove bookmark?`
@@ -111,7 +114,8 @@ export default {
         })
       this.show = false
     },
-    clickBookmark(bm) {
+    async clickBookmark(bm) {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.$emit('select', bm)
     },
     submitUpdateBookmark(updatedBookmark) {
@@ -155,7 +159,8 @@ export default {
       this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
       this.showBookmarkTitleInput = true
     },
-    submitBookmark() {
+    async submitBookmark() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       if (this.selectedBookmark) {
         var updatePayload = {
           ...this.selectedBookmark,

components/modals/FilterModal.vue

@@ -48,6 +48,8 @@
 </template>
 
 <script>
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
 export default {
   props: {
     value: Boolean,
@@ -196,7 +198,8 @@ export default {
     }
   },
   methods: {
-    clearSelected() {
+    async clearSelected() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.selected = 'all'
       this.show = false
       this.$nextTick(() => this.$emit('change', 'all'))
@@ -204,7 +207,7 @@ export default {
     clickedSublistOption(item) {
       this.clickedOption({ value: `${this.sublist}.${item}` })
     },
-    clickedOption(option) {
+    async clickedOption(option) {
       if (option.sublist) {
         this.sublist = option.value
         return
@@ -215,6 +218,7 @@ export default {
         this.show = false
         return
       }
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.selected = val
       this.show = false
       this.$nextTick(() => this.$emit('change', val))
@@ -228,4 +232,4 @@ export default {
 .filter-modal-wrapper {
   max-height: calc(100% - 320px);
 }
-</style>
+</style>

components/modals/LibrariesModal.vue

@@ -25,6 +25,8 @@
 </template>
 
 <script>
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
 export default {
   data() {
     return {
@@ -49,6 +51,7 @@ export default {
   },
   methods: {
     async clickedOption(lib) {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.show = false
       if (lib.id === this.currentLibraryId) return
       await this.$store.dispatch('libraries/fetch', lib.id)

components/modals/OrderModal.vue

@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
 export default {
   props: {
     value: Boolean,
@@ -126,7 +128,8 @@ export default {
     }
   },
   methods: {
-    clickedOption(val) {
+    async clickedOption(val) {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       if (this.selected === val) {
         this.selectedDesc = !this.selectedDesc
       } else {
@@ -139,4 +142,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

components/modals/SleepTimerModal.vue

@@ -59,6 +59,8 @@
 </template>
 
 <script>
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
 export default {
   props: {
     value: Boolean,
@@ -89,30 +91,37 @@ export default {
     }
   },
   methods: {
-    clickedChapterOption() {
+    async clickedChapterOption() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.show = false
       this.$nextTick(() => this.$emit('change', { time: this.currentEndOfChapterTime * 1000, isChapterTime: true }))
     },
-    clickedOption(timeoutMin) {
+    async clickedOption(timeoutMin) {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       var timeout = timeoutMin * 1000 * 60
       this.show = false
       this.manualTimerModal = false
       this.$nextTick(() => this.$emit('change', { time: timeout, isChapterTime: false }))
     },
-    cancelSleepTimer() {
+    async cancelSleepTimer() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.$emit('cancel')
       this.show = false
     },
-    increaseSleepTime() {
+    async increaseSleepTime() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.$emit('increase')
     },
-    decreaseSleepTime() {
+    async decreaseSleepTime() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.$emit('decrease')
     },
-    increaseManualTimeout() {
+    async increaseManualTimeout() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       this.manualTimeoutMin++
     },
-    decreaseManualTimeout() {
+    async decreaseManualTimeout() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       if (this.manualTimeoutMin > 1) this.manualTimeoutMin--
     }
   },

components/modals/playlists/AddCreateModal.vue

@@ -39,6 +39,8 @@
 </template>
 
 <script>
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+
 export default {
   props: {
     libraryItemId: String
@@ -114,7 +116,8 @@ export default {
           this.loading = false
         })
     },
-    clickPlaylist(playlist) {
+    async clickPlaylist(playlist) {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       if (playlist.isItemIncluded) {
         this.removeFromPlaylist(playlist)
       } else {
@@ -163,7 +166,8 @@ export default {
       this.newPlaylistName = ''
       this.showPlaylistNameInput = true
     },
-    submitCreatePlaylist() {
+    async submitCreatePlaylist() {
+      await Haptics.impact({ style: ImpactStyle.Medium });
       if (!this.newPlaylistName || !this.selectedPlaylistItems.length) {
         return
       }