Add a setting for vibration (#3813)

* Add a setting for vibration

* Update en.json

src/fake_data/provide_hass.ts

@@ -178,6 +178,7 @@ export const provideHass = (
 
     translationMetadata: translationMetadata as any,
     dockedSidebar: "auto",
+    vibrate: true,
     moreInfoEntityId: null as any,
     async callService(domain, service, data) {
       if (data && "entity_id" in data) {

src/panels/profile/ha-force-narrow-row.ts

@@ -15,7 +15,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { HaSwitch } from "../../components/ha-switch";
 
 @customElement("ha-force-narrow-row")
-class HaPushNotificationsRow extends LitElement {
+class HaForcedNarrowRow extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public narrow!: boolean;
 
@@ -49,6 +49,6 @@ class HaPushNotificationsRow extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-force-narrow-row": HaPushNotificationsRow;
+    "ha-force-narrow-row": HaForcedNarrowRow;
   }
 }

src/panels/profile/ha-panel-profile.ts

@@ -24,6 +24,7 @@ import "./ha-pick-language-row";
 import "./ha-pick-theme-row";
 import "./ha-push-notifications-row";
 import "./ha-force-narrow-row";
+import "./ha-set-vibrate-row";
 import {
   LitElement,
   TemplateResult,
@@ -105,6 +106,14 @@ class HaPanelProfile extends LitElement {
                   ></ha-force-narrow-row>
                 `
               : ""}
+            ${navigator.vibrate
+              ? html`
+                  <ha-set-vibrate-row
+                    .narrow=${this.narrow}
+                    .hass=${this.hass}
+                  ></ha-set-vibrate-row>
+                `
+              : ""}
             <ha-push-notifications-row
               .narrow=${this.narrow}
               .hass=${this.hass}

src/panels/profile/ha-set-vibrate-row.ts

@@ -0,0 +1,56 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  property,
+  customElement,
+} from "lit-element";
+
+import "./ha-settings-row";
+import "../../components/ha-switch";
+
+import { HomeAssistant } from "../../types";
+import { fireEvent } from "../../common/dom/fire_event";
+// tslint:disable-next-line: no-duplicate-imports
+import { HaSwitch } from "../../components/ha-switch";
+import { forwardHaptic } from "../../data/haptics";
+
+@customElement("ha-set-vibrate-row")
+class HaSetVibrateRow extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public narrow!: boolean;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <ha-settings-row .narrow=${this.narrow}>
+        <span slot="heading">
+          ${this.hass.localize("ui.panel.profile.vibrate.header")}
+        </span>
+        <span slot="description">
+          ${this.hass.localize("ui.panel.profile.vibrate.description")}
+        </span>
+        <ha-switch
+          .checked=${this.hass.vibrate}
+          @change=${this._checkedChanged}
+        ></ha-switch>
+      </ha-settings-row>
+    `;
+  }
+
+  private async _checkedChanged(ev: Event) {
+    const vibrate = (ev.target as HaSwitch).checked;
+    if (vibrate === this.hass.vibrate) {
+      return;
+    }
+    fireEvent(this, "hass-vibrate", {
+      vibrate,
+    });
+    forwardHaptic("light");
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-set-vibrate-row": HaSetVibrateRow;
+  }
+}

src/state/connection-mixin.ts

@@ -45,6 +45,7 @@ export const connectionMixin = (
 
         translationMetadata,
         dockedSidebar: "docked",
+        vibrate: true,
         moreInfoEntityId: null,
         hassUrl: (path = "") => new URL(path, auth.data.hassUrl).toString(),
         callService: async (domain, service, serviceData = {}) => {

src/state/haptic-mixin.ts

@@ -2,6 +2,24 @@ import { Constructor, LitElement, PropertyValues } from "lit-element";
 import { HassBaseEl } from "./hass-base-mixin";
 
 import { HapticType } from "../data/haptics";
+import { HomeAssistant } from "../types";
+import { HASSDomEvent } from "../common/dom/fire_event";
+import { storeState } from "../util/ha-pref-storage";
+
+interface VibrateParams {
+  vibrate: HomeAssistant["vibrate"];
+}
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "hass-vibrate": VibrateParams;
+  }
+  // for add event listener
+  interface HTMLElementEventMap {
+    "hass-vibrate": HASSDomEvent<VibrateParams>;
+  }
+}
 
 const hapticPatterns = {
   success: [50, 50, 50],
@@ -13,16 +31,30 @@ const hapticPatterns = {
   selection: [20],
 };
 
-const handleHaptic = (hapticType: HapticType) => {
-  navigator.vibrate(hapticPatterns[hapticType]);
+const handleHaptic = (hapticTypeEvent: HASSDomEvent<HapticType>) => {
+  navigator.vibrate(hapticPatterns[hapticTypeEvent.detail]);
 };
 
 export const hapticMixin = (superClass: Constructor<LitElement & HassBaseEl>) =>
   class extends superClass {
     protected firstUpdated(changedProps: PropertyValues) {
       super.firstUpdated(changedProps);
-      if (navigator.vibrate) {
-        window.addEventListener("haptic", (e) => handleHaptic(e.detail));
+      this.addEventListener("hass-vibrate", (ev) => {
+        const vibrate = ev.detail.vibrate;
+        if (navigator.vibrate && vibrate) {
+          window.addEventListener("haptic", handleHaptic);
+        } else {
+          window.removeEventListener("haptic", handleHaptic);
+        }
+        this._updateHass({ vibrate });
+        storeState(this.hass!);
+      });
+    }
+
+    protected hassConnected() {
+      super.hassConnected();
+      if (navigator.vibrate && this.hass!.vibrate) {
+        window.addEventListener("haptic", handleHaptic);
       }
     }
   };

src/translations/en.json

@@ -1214,6 +1214,10 @@
           "header": "Always hide the sidebar",
           "description": "This will hide the sidebar by default, similar to the mobile experience."
         },
+        "vibrate": {
+          "header": "Vibrate",
+          "description": "Enable or disable vibration on this device when controlling devices."
+        },
         "push_notifications": {
           "header": "Push Notifications",
           "description": "Send notifications to this device.",

src/types.ts

@@ -139,6 +139,7 @@ export interface HomeAssistant {
   localize: LocalizeFunc;
   translationMetadata: TranslationMetadata;
 
+  vibrate: boolean;
   dockedSidebar: "docked" | "always_hidden" | "auto";
   moreInfoEntityId: string | null;
   user?: CurrentUser;

src/util/ha-pref-storage.ts

@@ -1,6 +1,11 @@
 import { HomeAssistant } from "../types";
 
-const STORED_STATE = ["dockedSidebar", "selectedTheme", "selectedLanguage"];
+const STORED_STATE = [
+  "dockedSidebar",
+  "selectedTheme",
+  "selectedLanguage",
+  "vibrate",
+];
 const STORAGE = window.localStorage || {};
 
 export function storeState(hass: HomeAssistant) {
@@ -27,7 +32,6 @@ export function getState() {
       state[key] = value;
     }
   }
-
   return state;
 }