fix: use native haptic plugin and remove semicolons

components/modals/BookmarksModal.vue

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

components/modals/FilterModal.vue

@@ -48,8 +48,6 @@
 </template>
 
 <script>
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
-
 export default {
   props: {
     value: Boolean,
@@ -199,7 +197,7 @@ export default {
   },
   methods: {
     async clearSelected() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       this.selected = 'all'
       this.show = false
       this.$nextTick(() => this.$emit('change', 'all'))
@@ -218,7 +216,7 @@ export default {
         this.show = false
         return
       }
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       this.selected = val
       this.show = false
       this.$nextTick(() => this.$emit('change', val))

components/modals/LibrariesModal.vue

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

components/modals/OrderModal.vue

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

components/modals/SleepTimerModal.vue

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

components/modals/playlists/AddCreateModal.vue

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