mirror of
https://github.com/jkocon/tv-card.git
synced 2026-02-24 05:14:40 +01:00
Create tv-card-kicur.js
This commit is contained in:
jkocon
338
tv-card-kicur.js
Normal file
338
tv-card-kicur.js
Normal file
@@ -0,0 +1,338 @@
|
|||||||
|
const LitElement = Object.getPrototypeOf(
|
||||||
|
customElements.get("ha-panel-lovelace")
|
||||||
|
);
|
||||||
|
const html = LitElement.prototype.html;
|
||||||
|
|
||||||
|
class TVCardServices extends LitElement {
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
hass: {},
|
||||||
|
_config: {},
|
||||||
|
_apps: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static async getConfigElement() {
|
||||||
|
await import("./tv-card-editor.js");
|
||||||
|
return document.createElement("tv-card-editor");
|
||||||
|
}
|
||||||
|
|
||||||
|
static getStubConfig() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
getCardSize() {
|
||||||
|
return 7;
|
||||||
|
}
|
||||||
|
|
||||||
|
setConfig(config) {
|
||||||
|
if (!config.entity) {
|
||||||
|
console.log("Invalid configuration");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._config = { theme: "default", ...config };
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (!this._config || !this.hass) {
|
||||||
|
return html``;
|
||||||
|
}
|
||||||
|
|
||||||
|
const stateObj = this.hass.states[this._config.entity];
|
||||||
|
return html`
|
||||||
|
${this.renderStyle()}
|
||||||
|
<ha-card .header="${this._config.name}">
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"power_tv"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:power"
|
||||||
|
title="Power"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${""}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon=""
|
||||||
|
title=""
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"power_avr"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:power"
|
||||||
|
title="Power AVR"
|
||||||
|
></paper-icon-button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"back"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:arrow-left"
|
||||||
|
title="Back"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"source"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:video-input-hdmi"
|
||||||
|
title="Source"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"home"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:home"
|
||||||
|
title="Home"
|
||||||
|
></paper-icon-button>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"channelup"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:arrow-up"
|
||||||
|
title="Channelup"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"info"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:television-guide"
|
||||||
|
title="Guide"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"channeldown"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:arrow-down"
|
||||||
|
title="Channeldown"
|
||||||
|
></paper-icon-button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"up"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:chevron-up"
|
||||||
|
title="Up"
|
||||||
|
></paper-icon-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"left"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:chevron-left"
|
||||||
|
title="Left"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"select"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:checkbox-blank-circle"
|
||||||
|
title="Select"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"right"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:chevron-right"
|
||||||
|
title="Right"
|
||||||
|
></paper-icon-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"down"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:chevron-down"
|
||||||
|
title="Down"
|
||||||
|
></paper-icon-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"reverse"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:rewind"
|
||||||
|
title="Rewind"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"play"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:play-pause"
|
||||||
|
title="Play/Pause"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"forward"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:fast-forward"
|
||||||
|
title="Fast-Forward"
|
||||||
|
></paper-icon-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${
|
||||||
|
this._config.tv ||
|
||||||
|
this._config.volume_up ||
|
||||||
|
this._config.volume_down ||
|
||||||
|
this._config.volume_mute
|
||||||
|
? html`
|
||||||
|
<div class="row">
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"volume_mute"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:volume-mute"
|
||||||
|
title="Volume Mute"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"volume_down"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:volume-minus"
|
||||||
|
title="Volume Down"
|
||||||
|
></paper-icon-button>
|
||||||
|
<paper-icon-button
|
||||||
|
.action="${"volume_up"}"
|
||||||
|
@click="${this.handleActionClick}"
|
||||||
|
icon="mdi:volume-plus"
|
||||||
|
title="Volume Up"
|
||||||
|
></paper-icon-button>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
updated(changedProps) {
|
||||||
|
if (!this._config) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const oldHass = changedProps.get("hass");
|
||||||
|
if (!oldHass || oldHass.themes !== this.hass.themes) {
|
||||||
|
this.applyThemesOnElement(this, this.hass.themes, this._config.theme);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderStyle() {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
.remote {
|
||||||
|
padding: 16px 0px 16px 0px;
|
||||||
|
}
|
||||||
|
img,
|
||||||
|
paper-icon-button {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
padding: 8px 36px 8px 36px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
.diagonal {
|
||||||
|
background-color: var(--light-primary-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
launchApp(e) {
|
||||||
|
this.hass.callService("media_player", "select_source", {
|
||||||
|
entity_id: this._config.entity,
|
||||||
|
source: e.currentTarget.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleActionClick(e) {
|
||||||
|
const custom_services = [
|
||||||
|
"power_tv",
|
||||||
|
"power_avr",
|
||||||
|
"volume_up",
|
||||||
|
"volume_down",
|
||||||
|
"volume_mute",
|
||||||
|
"back",
|
||||||
|
"source",
|
||||||
|
"info",
|
||||||
|
"home",
|
||||||
|
"channelup",
|
||||||
|
"channeldown",
|
||||||
|
"up",
|
||||||
|
"left",
|
||||||
|
"select",
|
||||||
|
"right",
|
||||||
|
"down",
|
||||||
|
"reverse",
|
||||||
|
"play",
|
||||||
|
"forward"
|
||||||
|
];
|
||||||
|
|
||||||
|
if (
|
||||||
|
custom_services.indexOf(e.currentTarget.action) >= 0 &&
|
||||||
|
this._config[e.currentTarget.action]
|
||||||
|
) {
|
||||||
|
const [domain, service] = this._config[
|
||||||
|
e.currentTarget.action
|
||||||
|
].service.split(".", 2);
|
||||||
|
this.hass.callService(
|
||||||
|
domain,
|
||||||
|
service,
|
||||||
|
this._config[e.currentTarget.action].service_data
|
||||||
|
? this._config[e.currentTarget.action].service_data
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
let remote = this._config.remote
|
||||||
|
? this._config.remote
|
||||||
|
: "remote." + this._config.entity.split(".")[1];
|
||||||
|
this.hass.callService("remote", "send_command", {
|
||||||
|
entity_id: remote,
|
||||||
|
command: e.currentTarget.action
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
applyThemesOnElement(element, themes, localTheme) {
|
||||||
|
if (!element._themes) {
|
||||||
|
element._themes = {};
|
||||||
|
}
|
||||||
|
let themeName = themes.default_theme;
|
||||||
|
if (localTheme === "default" || (localTheme && themes.themes[localTheme])) {
|
||||||
|
themeName = localTheme;
|
||||||
|
}
|
||||||
|
const styles = Object.assign({}, element._themes);
|
||||||
|
if (themeName !== "default") {
|
||||||
|
var theme = themes.themes[themeName];
|
||||||
|
Object.keys(theme).forEach(key => {
|
||||||
|
var prefixedKey = "--" + key;
|
||||||
|
element._themes[prefixedKey] = "";
|
||||||
|
styles[prefixedKey] = theme[key];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (element.updateStyles) {
|
||||||
|
element.updateStyles(styles);
|
||||||
|
} else if (window.ShadyCSS) {
|
||||||
|
// implement updateStyles() method of Polemer elements
|
||||||
|
window.ShadyCSS.styleSubtree(
|
||||||
|
/** @type {!HTMLElement} */ (element),
|
||||||
|
styles
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const meta = document.querySelector("meta[name=theme-color]");
|
||||||
|
if (meta) {
|
||||||
|
if (!meta.hasAttribute("default-content")) {
|
||||||
|
meta.setAttribute("default-content", meta.getAttribute("content"));
|
||||||
|
}
|
||||||
|
const themeColor =
|
||||||
|
styles["--primary-color"] || meta.getAttribute("default-content");
|
||||||
|
meta.setAttribute("content", themeColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("tv-card", TVCardServices);
|
||||||
Reference in New Issue
Block a user