native haptics

NUXT/pages/mods/theme.vue

@@ -105,7 +105,10 @@
         flat
         class="d-flex flex-row justify-between mx-8 mb-4 px-4 background rounded-lg"
         :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
-        @click="$vuetify.theme.dark = !$vuetify.theme.dark"
+        @click="
+          ($vuetify.theme.dark = !$vuetify.theme.dark),
+            $vuetube.haptics.hapticsImpactLight(1)
+        "
       >
         <div class="my-auto">
           <div>Dark Mode</div>
@@ -207,9 +210,6 @@ export default {
           this.$vuetify.theme.currentTheme.background = this.experimentalLight;
       }, 0);
     },
-    saveTheme() {
-      navigator.vibrate([10, 100, 5]);
-    },
   },
 };
 </script>

NUXT/pages/mods/tweaks.vue

@@ -3,6 +3,7 @@
     <v-card
       flat
       class="px-6 ma-4 mt-2 background"
+      style="transition-duration: 0.3s; transition-property: border-radius"
       :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
       :style="{
         borderRadius: `${roundTweak / 2}rem`,
@@ -26,7 +27,7 @@
         :max="4"
         step="1"
         thumb-size="64"
-        @input="vibrate()"
+        @input="$vuetube.haptics.hapticsImpactLight(1)"
       >
         <template #thumb-label="{ value }">
           <div
@@ -51,10 +52,5 @@ export default {
       },
     },
   },
-  methods: {
-    vibrate() {
-      navigator.vibrate(10);
-    },
-  },
 };
 </script>

NUXT/plugins/vuetube.js

@@ -4,6 +4,7 @@ import { StatusBar, Style } from "@capacitor/status-bar";
 import { NavigationBar } from "@hugotomazi/capacitor-navigation-bar";
 import constants from "./constants";
 import { hexToRgb, rgbToHex } from "./utils";
+import { Haptics, ImpactStyle } from "@capacitor/haptics";
 
 const module = {
   //---   Get GitHub Commits   ---//
@@ -37,6 +38,21 @@ const module = {
       });
   },
 
+  haptics: {
+    async hapticsImpactHeavy(x) {
+      await Haptics.impact({ style: ImpactStyle.Heavy, duration: x });
+    },
+    async hapticsImpactMedium(x) {
+      await Haptics.impact({ style: ImpactStyle.Medium, duration: x });
+    },
+    async hapticsImpactLight(x) {
+      await Haptics.impact({ style: ImpactStyle.Light, duration: x });
+    },
+    async hapticsVibrate(x) {
+      await Haptics.vibrate(x);
+    },
+  },
+
   statusBar: {
     async hide() {
       return await StatusBar.hide();

android/.idea/deploymentTargetDropDown.xml

@@ -12,6 +12,6 @@
         </deviceKey>
       </Target>
     </targetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2022-03-31T17:44:52.270258Z" />
+    <timeTargetWasSelectedWithDropDown value="2022-03-31T22:44:20.197073Z" />
   </component>
 </project>

android/app/capacitor.build.gradle

@@ -13,6 +13,7 @@ dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-browser')
     implementation project(':capacitor-device')
+    implementation project(':capacitor-haptics')
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')

android/app/src/main/assets/capacitor.plugins.json

@@ -15,6 +15,10 @@
 		"pkg": "@capacitor/device",
 		"classpath": "com.capacitorjs.plugins.device.DevicePlugin"
 	},
+	{
+		"pkg": "@capacitor/haptics",
+		"classpath": "com.capacitorjs.plugins.haptics.HapticsPlugin"
+	},
 	{
 		"pkg": "@capacitor/share",
 		"classpath": "com.capacitorjs.plugins.share.SharePlugin"

android/capacitor.settings.gradle

@@ -14,6 +14,9 @@ project(':capacitor-browser').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-device'
 project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')
 
+include ':capacitor-haptics'
+project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
+
 include ':capacitor-share'
 project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/share/android')
 

ios/App/Podfile

@@ -13,6 +13,7 @@ def capacitor_pods
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
   pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
   pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
+  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
   pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
   pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'

package.json

@@ -7,6 +7,7 @@
     "@capacitor/cli": "^3.4.0",
     "@capacitor/core": "^3.4.0",
     "@capacitor/device": "^1.1.2",
+    "@capacitor/haptics": "^1.1.4",
     "@capacitor/share": "^1.1.2",
     "@capacitor/splash-screen": "^1.2.2",
     "@capacitor/status-bar": "^1.0.8",