Skip to content

Commit 6ef3fbb

Browse files
author
TechHome
authored
Merge pull request #6 from andersteern/apple-tv
Make all buttons optional
2 parents 91319a9 + 39a2310 commit 6ef3fbb

File tree

1 file changed

+155
-91
lines changed

1 file changed

+155
-91
lines changed

‎tv-card.js‎

Lines changed: 155 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ class TVCardServices extends LitElement {
1212
};
1313
}
1414

15-
// static async getConfigElement() {
16-
// await import("./tv-card-editor.js");
17-
// return document.createElement("tv-card-editor");
18-
// }
15+
// static async getConfigElement() {
16+
// await import("./tv-card-editor.js");
17+
// return document.createElement("tv-card-editor");
18+
// }
1919

2020
static getStubConfig() {
2121
return {};
@@ -40,77 +40,123 @@ class TVCardServices extends LitElement {
4040
}
4141

4242
const stateObj = this.hass.states[this._config.entity];
43+
44+
const emptyButton = html`
45+
<paper-icon-button
46+
.action="${""}"
47+
@click="${this.handleActionClick}"
48+
icon=""
49+
title=""
50+
></paper-icon-button>
51+
`;
52+
4353
return html`
4454
${this.renderStyle()}
4555
<ha-card .header="${this._config.name}">
4656
<div class="row">
4757
4858
</div>
49-
<div class="row">
50-
<paper-icon-button
51-
.action="${"power"}"
52-
@click="${this.handleActionClick}"
53-
icon="mdi:power"
54-
title="Power"
55-
></paper-icon-button>
56-
<paper-icon-button
57-
.action="${""}"
58-
@click="${this.handleActionClick}"
59-
icon=""
60-
title=""
61-
></paper-icon-button>
62-
<paper-icon-button
63-
.action="${"power"}"
64-
@click="${this.handleActionClick}"
65-
icon="mdi:power"
66-
title="Power"
67-
></paper-icon-button>
68-
69-
</div>
70-
<div class="row">
71-
<paper-icon-button
72-
.action="${"back"}"
73-
@click="${this.handleActionClick}"
74-
icon="mdi:arrow-left"
75-
title="Back"
76-
></paper-icon-button>
77-
<paper-icon-button
78-
.action="${"source"}"
79-
@click="${this.handleActionClick}"
80-
icon="mdi:video-input-hdmi"
81-
title="Source"
82-
></paper-icon-button>
83-
<paper-icon-button
84-
.action="${"home"}"
85-
@click="${this.handleActionClick}"
86-
icon="mdi:home"
87-
title="Home"
88-
></paper-icon-button>
89-
90-
91-
</div>
59+
${
60+
this._config.power
61+
? html`
62+
<div class="row">
63+
<paper-icon-button
64+
.action="${"power"}"
65+
@click="${this.handleActionClick}"
66+
icon="mdi:power"
67+
title="Power"
68+
></paper-icon-button>
69+
${emptyButton}
70+
<paper-icon-button
71+
.action="${"power"}"
72+
@click="${this.handleActionClick}"
73+
icon="mdi:power"
74+
title="Power"
75+
></paper-icon-button>
76+
</div>
77+
`
78+
: ""
79+
}
9280
93-
<div class="row">
94-
<paper-icon-button
95-
.action="${"channelup"}"
96-
@click="${this.handleActionClick}"
97-
icon="mdi:arrow-up"
98-
title="Channelup"
99-
></paper-icon-button>
100-
<paper-icon-button
101-
.action="${"info"}"
102-
@click="${this.handleActionClick}"
103-
icon="mdi:television-guide"
104-
title="Guide"
105-
></paper-icon-button>
106-
<paper-icon-button
107-
.action="${"channeldown"}"
108-
@click="${this.handleActionClick}"
109-
icon="mdi:arrow-down"
110-
title="Channeldown"
111-
></paper-icon-button>
81+
${
82+
this._config.back || this._config.source || this._config.home
83+
? html`
84+
<div class="row">
85+
${this._config.back
86+
? html`
87+
<paper-icon-button
88+
.action="${"back"}"
89+
@click="${this.handleActionClick}"
90+
icon="mdi:arrow-left"
91+
title="Back"
92+
></paper-icon-button>
93+
`
94+
: emptyButton}
95+
${this._config.source
96+
? html`
97+
<paper-icon-button
98+
.action="${"source"}"
99+
@click="${this.handleActionClick}"
100+
icon="mdi:video-input-hdmi"
101+
title="Source"
102+
></paper-icon-button>
103+
`
104+
: emptyButton}
105+
${this._config.home
106+
? html`
107+
<paper-icon-button
108+
.action="${"home"}"
109+
@click="${this.handleActionClick}"
110+
icon="mdi:home"
111+
title="Home"
112+
></paper-icon-button>
113+
`
114+
: emptyButton}
115+
</div>
116+
`
117+
: ""
118+
}
112119
113-
</div>
120+
${
121+
this._config.channelup ||
122+
this._config.info ||
123+
this._config.channeldown
124+
? html`
125+
<div class="row">
126+
${this._config.channelup
127+
? html`
128+
<paper-icon-button
129+
.action="${"channelup"}"
130+
@click="${this.handleActionClick}"
131+
icon="mdi:arrow-up"
132+
title="Channelup"
133+
></paper-icon-button>
134+
`
135+
: emptyButton}
136+
${this._config.info
137+
? html`
138+
<paper-icon-button
139+
.action="${"info"}"
140+
@click="${this.handleActionClick}"
141+
icon="mdi:television-guide"
142+
title="Guide"
143+
></paper-icon-button>
144+
`
145+
: emptyButton}
146+
${this._config.channeldown
147+
? html`
148+
<paper-icon-button
149+
.action="${"channeldown"}"
150+
@click="${this.handleActionClick}"
151+
icon="mdi:arrow-down"
152+
title="Channeldown"
153+
></paper-icon-button>
154+
`
155+
: emptyButton}
156+
</div>
157+
`
158+
: ""
159+
}
114160
115161
<div class="row">
116162
<paper-icon-button
@@ -151,26 +197,44 @@ class TVCardServices extends LitElement {
151197
></paper-icon-button>
152198
</div>
153199
154-
<div class="row">
155-
<paper-icon-button
156-
.action="${"reverse"}"
157-
@click="${this.handleActionClick}"
158-
icon="mdi:rewind"
159-
title="Rewind"
160-
></paper-icon-button>
161-
<paper-icon-button
162-
.action="${"play"}"
163-
@click="${this.handleActionClick}"
164-
icon="mdi:play-pause"
165-
title="Play/Pause"
166-
></paper-icon-button>
167-
<paper-icon-button
168-
.action="${"forward"}"
169-
@click="${this.handleActionClick}"
170-
icon="mdi:fast-forward"
171-
title="Fast-Forward"
172-
></paper-icon-button>
173-
</div>
200+
${
201+
this._config.reverse || this._config.play || this._config.forward
202+
? html`
203+
<div class="row">
204+
${this._config.reverse
205+
? html`
206+
<paper-icon-button
207+
.action="${"reverse"}"
208+
@click="${this.handleActionClick}"
209+
icon="mdi:rewind"
210+
title="Rewind"
211+
></paper-icon-button>
212+
`
213+
: emptyButton}
214+
${this._config.play
215+
? html`
216+
<paper-icon-button
217+
.action="${"play"}"
218+
@click="${this.handleActionClick}"
219+
icon="mdi:play-pause"
220+
title="Play/Pause"
221+
></paper-icon-button>
222+
`
223+
: emptyButton}
224+
${this._config.forward
225+
? html`
226+
<paper-icon-button
227+
.action="${"forward"}"
228+
@click="${this.handleActionClick}"
229+
icon="mdi:fast-forward"
230+
title="Fast-Forward"
231+
></paper-icon-button>
232+
`
233+
: emptyButton}
234+
</div>
235+
`
236+
: ""
237+
}
174238
175239
${
176240
this._config.tv ||
@@ -255,19 +319,19 @@ class TVCardServices extends LitElement {
255319
"volume_down",
256320
"volume_mute",
257321
"back",
258-
"source",
322+
"source",
259323
"info",
260324
"home",
261-
"channelup",
262-
"channeldown",
325+
"channelup",
326+
"channeldown",
263327
"up",
264328
"left",
265329
"select",
266330
"right",
267331
"down",
268332
"reverse",
269333
"play",
270-
"forward"
334+
"forward"
271335
];
272336

273337
if (

0 commit comments

Comments
 (0)