diff --git a/src/common/const.ts b/src/common/const.ts
index bbf051f668..0b3e70ed03 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -103,6 +103,7 @@ export const DOMAINS_WITH_MORE_INFO = [
"lock",
"media_player",
"person",
+ "remote",
"script",
"sun",
"timer",
diff --git a/src/data/remote.ts b/src/data/remote.ts
new file mode 100644
index 0000000000..1f87a2038e
--- /dev/null
+++ b/src/data/remote.ts
@@ -0,0 +1,16 @@
+import {
+ HassEntityAttributeBase,
+ HassEntityBase,
+} from "home-assistant-js-websocket";
+
+export const REMOTE_SUPPORT_LEARN_COMMAND = 1;
+export const REMOTE_SUPPORT_DELETE_COMMAND = 2;
+export const REMOTE_SUPPORT_ACTIVITY = 4;
+
+export type RemoteEntity = HassEntityBase & {
+ attributes: HassEntityAttributeBase & {
+ current_activity: string | null;
+ activity_list: string[] | null;
+ [key: string]: any;
+ };
+};
diff --git a/src/dialogs/more-info/controls/more-info-remote.ts b/src/dialogs/more-info/controls/more-info-remote.ts
new file mode 100644
index 0000000000..cb00995758
--- /dev/null
+++ b/src/dialogs/more-info/controls/more-info-remote.ts
@@ -0,0 +1,93 @@
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { supportsFeature } from "../../../common/entity/supports-feature";
+import "../../../components/ha-attributes";
+import "../../../components/ha-paper-dropdown-menu";
+import { RemoteEntity, REMOTE_SUPPORT_ACTIVITY } from "../../../data/remote";
+import { HomeAssistant } from "../../../types";
+
+const filterExtraAttributes = "activity_list,current_activity";
+
+@customElement("more-info-remote")
+class MoreInfoRemote extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property() public stateObj?: RemoteEntity;
+
+ protected render(): TemplateResult {
+ if (!this.hass || !this.stateObj) {
+ return html``;
+ }
+
+ const stateObj = this.stateObj;
+
+ return html`
+ ${supportsFeature(stateObj, REMOTE_SUPPORT_ACTIVITY)
+ ? html`
+
+
+ ${stateObj.attributes.activity_list!.map(
+ (activity) => html`
+
+ ${activity}
+
+ `
+ )}
+
+
+ `
+ : ""}
+
+
+ `;
+ }
+
+ private handleActivityChanged(ev: CustomEvent) {
+ const oldVal = this.stateObj!.attributes.current_activity;
+ const newVal = ev.detail.item.itemName;
+
+ if (!newVal || oldVal === newVal) {
+ return;
+ }
+
+ this.hass.callService("remote", "turn_on", {
+ entity_id: this.stateObj!.entity_id,
+ activity: newVal,
+ });
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ paper-item {
+ cursor: pointer;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "more-info-remote": MoreInfoRemote;
+ }
+}
diff --git a/src/dialogs/more-info/state_more_info_control.ts b/src/dialogs/more-info/state_more_info_control.ts
index 6f8cf904ab..4efdca33ae 100644
--- a/src/dialogs/more-info/state_more_info_control.ts
+++ b/src/dialogs/more-info/state_more_info_control.ts
@@ -21,6 +21,7 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
lock: () => import("./controls/more-info-lock"),
media_player: () => import("./controls/more-info-media_player"),
person: () => import("./controls/more-info-person"),
+ remote: () => import("./controls/more-info-remote"),
script: () => import("./controls/more-info-script"),
sun: () => import("./controls/more-info-sun"),
timer: () => import("./controls/more-info-timer"),
diff --git a/src/translations/en.json b/src/translations/en.json
index 40c01df95d..d06592b935 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -611,6 +611,9 @@
"updater": {
"title": "Update Instructions"
},
+ "remote": {
+ "activity": "Current activity"
+ },
"restored": {
"not_provided": "This entity is currently unavailable and is an orphan to a removed, changed or dysfunctional integration or device.",
"remove_intro": "If the entity is no longer in use, you can clean it up by removing it.",