diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index 8288ef46..01f84268 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -118,7 +118,6 @@
 <script>
 import { Capacitor } from '@capacitor/core'
 import { AbsAudioPlayer } from '@/plugins/capacitor'
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
 
 export default {
   props: {
@@ -337,17 +336,17 @@ export default {
       }
     },
     async touchstartTrack(e) {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (!e || !e.touches || !this.$refs.track || !this.showFullscreen || this.lockUi) return
       this.touchTrackStart = true
     },
     async selectChapter(chapter) {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       this.seek(chapter.start)
       this.showChapterModal = false
     },
     async castClick() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.isLocalPlayMethod) {
         this.$eventBus.$emit('cast-local-item')
         return
@@ -367,13 +366,13 @@ export default {
       this.forceCloseDropdownMenu()
     },
     async jumpNextChapter() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.isLoading) return
       if (!this.nextChapter) return
       this.seek(this.nextChapter.start)
     },
     async jumpChapterStart() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.isLoading) return
       if (!this.currentChapter) {
         return this.restart()
@@ -394,7 +393,7 @@ export default {
       this.$emit('showSleepTimer')
     },
     async setPlaybackSpeed(speed) {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       console.log(`[AudioPlayer] Set Playback Rate: ${speed}`)
       this.currentPlaybackRate = speed
       AbsAudioPlayer.setPlaybackSpeed({ value: speed })
@@ -403,12 +402,12 @@ export default {
       this.seek(0)
     },
     async jumpBackwards() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.isLoading) return
       AbsAudioPlayer.seekBackward({ value: this.jumpBackwardsTime })
     },
     async jumpForward() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.isLoading) return
       AbsAudioPlayer.seekForward({ value: this.jumpForwardTime })
     },
@@ -548,7 +547,7 @@ export default {
       this.seek(time)
     },
     async playPauseClick() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.isLoading) return
 
       this.isPlaying = !!((await AbsAudioPlayer.playPause()) || {}).playing
@@ -652,7 +651,7 @@ export default {
       }
     },
     async clickMenuAction(action) {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       this.showMoreMenuDialog = false
       this.$nextTick(() => {
         if (action === 'lock') {
diff --git a/components/app/SideDrawer.vue b/components/app/SideDrawer.vue
index a3562672..152dcf95 100644
--- a/components/app/SideDrawer.vue
+++ b/components/app/SideDrawer.vue
@@ -36,7 +36,6 @@
 
 <script>
 import TouchEvent from '@/objects/TouchEvent'
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
 
 export default {
   data() {
@@ -138,7 +137,7 @@ export default {
       this.show = false
     },
     async logout() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.user) {
         await this.$axios.$post('/logout').catch((error) => {
           console.error(error)
diff --git a/components/cards/LazyBookCard.vue b/components/cards/LazyBookCard.vue
index 9596b880..5d4090ca 100644
--- a/components/cards/LazyBookCard.vue
+++ b/components/cards/LazyBookCard.vue
@@ -70,7 +70,6 @@
 
 <script>
 import { Capacitor } from '@capacitor/core'
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
 
 export default {
   props: {
@@ -408,7 +407,7 @@ export default {
         e.preventDefault()
         this.selectBtnClick()
       } else if (this.recentEpisode) {
-        await Haptics.impact({ style: ImpactStyle.Medium });
+        await this.$hapticsImpactMedium()
         var eventBus = this.$eventBus || this.$nuxt.$eventBus
         if (this.streamIsPlaying) {
           eventBus.$emit('pause-item')
diff --git a/components/connection/ServerConnectForm.vue b/components/connection/ServerConnectForm.vue
index b2aa24f1..ad220a7f 100644
--- a/components/connection/ServerConnectForm.vue
+++ b/components/connection/ServerConnectForm.vue
@@ -77,7 +77,6 @@
 
 <script>
 import { Dialog } from '@capacitor/dialog'
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
 
 export default {
   data() {
@@ -133,7 +132,7 @@ export default {
       }
     },
     async connectToServer(config) {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       console.log('[ServerConnectForm] connectToServer', config.address)
       this.processing = true
       this.serverConfig = {
@@ -161,7 +160,7 @@ export default {
     },
     async removeServerConfigClick() {
       if (!this.serverConfig.id) return
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
 
       const { value } = await Dialog.confirm({
         title: 'Confirm',
@@ -193,7 +192,7 @@ export default {
       this.showAuth = true
     },
     async newServerConfigClick() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       this.serverConfig = {
         address: '',
         userId: '',
diff --git a/components/home/BookshelfToolbar.vue b/components/home/BookshelfToolbar.vue
index dc6795f1..4f31b40a 100644
--- a/components/home/BookshelfToolbar.vue
+++ b/components/home/BookshelfToolbar.vue
@@ -25,8 +25,6 @@
 </template>
 
 <script>
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
-
 export default {
   data() {
     return {
@@ -107,7 +105,7 @@ export default {
     },
     async changeView() {
       this.bookshelfListView = !this.bookshelfListView
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
     }
   },
   mounted() {
diff --git a/components/modals/BookmarksModal.vue b/components/modals/BookmarksModal.vue
index 04dc745f..19f7a891 100644
--- a/components/modals/BookmarksModal.vue
+++ b/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,
diff --git a/components/modals/FilterModal.vue b/components/modals/FilterModal.vue
index e5134598..41715ef2 100644
--- a/components/modals/FilterModal.vue
+++ b/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))
diff --git a/components/modals/LibrariesModal.vue b/components/modals/LibrariesModal.vue
index ce16ed15..378f866a 100644
--- a/components/modals/LibrariesModal.vue
+++ b/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)
diff --git a/components/modals/OrderModal.vue b/components/modals/OrderModal.vue
index 93a7bcc3..c46120b4 100644
--- a/components/modals/OrderModal.vue
+++ b/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 {
diff --git a/components/modals/SleepTimerModal.vue b/components/modals/SleepTimerModal.vue
index 8906f747..90f2e325 100644
--- a/components/modals/SleepTimerModal.vue
+++ b/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--
     }
   },
diff --git a/components/modals/playlists/AddCreateModal.vue b/components/modals/playlists/AddCreateModal.vue
index cf109e09..25cf827e 100644
--- a/components/modals/playlists/AddCreateModal.vue
+++ b/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
       }
diff --git a/components/tables/podcast/EpisodeRow.vue b/components/tables/podcast/EpisodeRow.vue
index 55a1d573..45eb8987 100644
--- a/components/tables/podcast/EpisodeRow.vue
+++ b/components/tables/podcast/EpisodeRow.vue
@@ -45,7 +45,6 @@
 <script>
 import { Dialog } from '@capacitor/dialog'
 import { AbsFileSystem, AbsDownloader } from '@/plugins/capacitor'
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
 
 export default {
   props: {
@@ -151,7 +150,7 @@ export default {
     },
     async downloadClick() {
       if (this.downloadItem) return
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.isIos) {
         // no local folders on iOS
         this.startDownload()
@@ -212,7 +211,7 @@ export default {
       }
     },
     async playClick() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.streamIsPlaying) {
         this.$eventBus.$emit('pause-item')
       } else {
@@ -234,7 +233,7 @@ export default {
       }
     },
     async toggleFinished() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       this.isProcessingReadUpdate = true
       if (this.isLocal || this.localEpisode) {
         var isFinished = !this.userIsFinished
diff --git a/pages/account.vue b/pages/account.vue
index 6c6fa685..27fb5ff6 100644
--- a/pages/account.vue
+++ b/pages/account.vue
@@ -23,8 +23,6 @@
 </template>
 
 <script>
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
-
 export default {
   asyncData({ redirect, store }) {
     if (!store.state.socketConnected) {
@@ -55,7 +53,7 @@ export default {
   },
   methods: {
     async logout() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.user) {
         await this.$axios.$post('/logout').catch((error) => {
           console.error(error)
diff --git a/pages/item/_id.vue b/pages/item/_id.vue
index ebfdb0bc..228867f8 100644
--- a/pages/item/_id.vue
+++ b/pages/item/_id.vue
@@ -142,7 +142,6 @@
 <script>
 import { Dialog } from '@capacitor/dialog'
 import { AbsFileSystem, AbsDownloader } from '@/plugins/capacitor'
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
 
 
 export default {
@@ -410,7 +409,7 @@ export default {
     },
     async playClick() {
       var episodeId = null
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
 
       if (this.isPodcast) {
         this.episodes.sort((a, b) => {
@@ -464,7 +463,7 @@ export default {
       this.$eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId })
     },
     async clearProgressClick() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       const { value } = await Dialog.confirm({
         title: 'Confirm',
         message: 'Are you sure you want to reset your progress?'
@@ -517,7 +516,7 @@ export default {
       if (!this.numTracks) {
         return
       }
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (this.isIos) {
         // no local folders on iOS
         this.startDownload()
@@ -585,7 +584,7 @@ export default {
       }
     },
     async toggleFinished() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       this.isProcessingReadUpdate = true
       if (this.isLocal) {
         var isFinished = !this.userIsFinished
diff --git a/pages/localMedia/item/_id.vue b/pages/localMedia/item/_id.vue
index 4b6aa566..72cb0f57 100644
--- a/pages/localMedia/item/_id.vue
+++ b/pages/localMedia/item/_id.vue
@@ -105,7 +105,6 @@ 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: {
@@ -257,7 +256,7 @@ export default {
       this.showDialog = true
     },
     async play() {
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItemId })
     },
     getCapImageSrc(contentUrl) {
@@ -265,7 +264,7 @@ export default {
     },
     async dialogAction(action) {
       console.log('Dialog action', action)
-      await Haptics.impact({ style: ImpactStyle.Medium });
+      await this.$hapticsImpactMedium()
       if (action == 'scan') {
         this.scanItem()
       } else if (action == 'rescan') {
diff --git a/plugins/haptics.js b/plugins/haptics.js
index c60cb4e3..5000e277 100644
--- a/plugins/haptics.js
+++ b/plugins/haptics.js
@@ -1,52 +1,52 @@
-import Vue from 'vue'
-import { Haptics, ImpactStyle, NotificationType } from '@capacitor/haptics'
+import Vue from "vue";
+import { Haptics, ImpactStyle, NotificationType } from "@capacitor/haptics"
 
 const hapticsImpactHeavy = async () => {
-  await Haptics.impact({ style: ImpactStyle.Heavy });
+  await Haptics.impact({ style: ImpactStyle.Heavy })
 }
-Vue.prototype.$hapticsImpactHeavy = hapticsImpactHeavy
+Vue.prototype.$hapticsImpactHeavy = hapticsImpactHeavy;
 
 const hapticsImpactMedium = async () => {
-  await Haptics.impact({ style: ImpactStyle.Medium });
+  await Haptics.impact({ style: ImpactStyle.Medium })
 }
 Vue.prototype.$hapticsImpactMedium = hapticsImpactMedium
 
 const hapticsImpactLight = async () => {
-  await Haptics.impact({ style: ImpactStyle.Light });
-};
+  await Haptics.impact({ style: ImpactStyle.Light })
+}
 Vue.prototype.$hapticsImpactLight = hapticsImpactLight
 
 const hapticsVibrate = async () => {
-  await Haptics.vibrate();
-};
-Vue.prototype.$hapticsVibrate = hapticsVibrate
+  await Haptics.vibrate()
+}
+Vue.prototype.$hapticsVibrate = hapticsVibrate;
 
 const hapticsNotificationSuccess = async () => {
-  await Haptics.notification({ type: NotificationType.Success });
-};
+  await Haptics.notification({ type: NotificationType.Success })
+}
 Vue.prototype.$hapticsNotificationSuccess = hapticsNotificationSuccess
 
 const hapticsNotificationWarning = async () => {
-  await Haptics.notification({ type: NotificationType.Warning });
-};
+  await Haptics.notification({ type: NotificationType.Warning })
+}
 Vue.prototype.$hapticsNotificationWarning = hapticsNotificationWarning
 
 const hapticsNotificationError = async () => {
-  await Haptics.notification({ type: NotificationType.Error });
-};
+  await Haptics.notification({ type: NotificationType.Error })
+}
 Vue.prototype.$hapticsNotificationError = hapticsNotificationError
 
 const hapticsSelectionStart = async () => {
-  await Haptics.selectionStart();
-};
+  await Haptics.selectionStart()
+}
 Vue.prototype.$hapticsSelectionStart = hapticsSelectionStart
 
 const hapticsSelectionChanged = async () => {
-  await Haptics.selectionChanged();
-};
+  await Haptics.selectionChanged()
+}
 Vue.prototype.$hapticsSelectionChanged = hapticsSelectionChanged
 
 const hapticsSelectionEnd = async () => {
-  await Haptics.selectionEnd();
-};
-Vue.prototype.$hapticsSelectionEnd = hapticsSelectionEnd
\ No newline at end of file
+  await Haptics.selectionEnd()
+}
+Vue.prototype.$hapticsSelectionEnd = hapticsSelectionEnd