8558 lines
380 KiB
JavaScript
8558 lines
380 KiB
JavaScript
const HAFiremoteVersion = 'v4.1.9';
|
|
|
|
import {LitElement, html, css, unsafeHTML, unsafeCSS, styleMap} from './lit/lit-all.min.js';
|
|
import {launcherData, launcherCSS} from "./launcher-buttons.js?version=v4.1.9";
|
|
import {rosettaStone} from './language-translations.js?version=v4.1.9';
|
|
import {devices} from './supported-devices.js?version=v4.1.9';
|
|
|
|
console.groupCollapsed("%c 🔥 FIREMOTE-CARD 🔥 %c "+HAFiremoteVersion+" installed ", "color: orange; font-weight: bold; background: black", "color: green; font-weight: bold;"),
|
|
console.log("Readme:", "https://github.com/PRProd/HA-Firemote"),
|
|
console.groupEnd();
|
|
|
|
const fireEvent = (node, type, detail, options) => {
|
|
options = options || {};
|
|
detail = detail === null || detail === undefined ? {} : detail;
|
|
const event = new Event(type, {
|
|
bubbles: options.bubbles === undefined ? true : options.bubbles,
|
|
cancelable: Boolean(options.cancelable),
|
|
composed: options.composed === undefined ? true : options.composed
|
|
});
|
|
event.detail = detail;
|
|
node.dispatchEvent(event);
|
|
return event;
|
|
}
|
|
|
|
|
|
// Process the imported data
|
|
const devicemap = new Map(Object.entries(devices));
|
|
var appmap = new Map(Object.entries(launcherData));
|
|
const translationmap = new Map(Object.entries(rosettaStone));
|
|
|
|
|
|
// Set the max number of app launcher buttons for each remote style
|
|
const appButtonMax = { "AF4": 6, "AF5": 6, "AF6": 6, "AFJTV": 6, "AFXF2": 6, "AR1": 10, "AR2": 8, "AR3": 8,
|
|
"CC1": 8, "CC2": 8, "CC3": 8, "NS2": 6, "ON1": 8, "ON2": 8, "RVRP": 10, "RHR": 10,
|
|
"RTR": 8, "RWR": 10, "RVR": 10, "RSR": 10, "XM1": 10, "XM2": 10, "HO1": 6, "HO2": 8,
|
|
"HO3": 6, "HO4": 6, "AL1": appmap.size, "AL2": appmap.size,};
|
|
|
|
|
|
function deviceAttributeQuery(deviceAttribute, configvar){
|
|
var deviceTypeRef = configvar.device_type;
|
|
if(configvar[deviceAttribute+'_override']) {
|
|
if(configvar[deviceAttribute+'_override'] != 'none') {
|
|
return configvar[deviceAttribute+'_override'];
|
|
}
|
|
}
|
|
var attributeValue = '';
|
|
var deviceSearch = function(deviceName, jsonData) {
|
|
for (var key in jsonData) {
|
|
if(typeof(jsonData[key]) === 'object') {
|
|
if(key == deviceName) {
|
|
attributeValue = String(jsonData[key][deviceAttribute]);
|
|
}
|
|
else {
|
|
deviceSearch(deviceName, jsonData[key]);
|
|
}
|
|
}
|
|
}
|
|
return attributeValue;
|
|
}
|
|
return String(deviceSearch(deviceTypeRef, devices));
|
|
}
|
|
|
|
|
|
function truncate(str, length) {
|
|
return str.length > length ? str.substr(0, length) : str;
|
|
}
|
|
|
|
|
|
function resetAppMap(){
|
|
appmap = new Map(Object.entries(launcherData));
|
|
}
|
|
|
|
|
|
function handlehdmi(config, inputs = 0) {
|
|
if( inputs > 0 ) {
|
|
for (let i = 1; i <= inputs; i++) {
|
|
var configitem = "hdmi_"+i;
|
|
var inputname = "HDMI "+i;
|
|
var friendlyname = "HDMI "+i;
|
|
if (config[configitem]) {
|
|
inputname = truncate(config[configitem], 8);
|
|
friendlyname = 'HDMI '+i+' - '+inputname;
|
|
}
|
|
if( config.device_type == 'fire_tv_cube_third_gen') {
|
|
appmap.set(configitem, {"button": inputname, "friendlyName": friendlyname, "androidName": "", "adbLaunchCommand": "adb shell am start -n com.amazon.tv.inputpreference.service/com.amazon.tv.inputpreference.player.InputChooserActivity"});
|
|
return;
|
|
}
|
|
if (config.device_family == "roku") {
|
|
appmap.set(configitem, {"button": inputname, "friendlyName": friendlyname, "appName": "HDMI "+i, "remoteCommand": '{"command": "input_hdmi'+i+'", "num_repeats": 1, "hold_secs": 0}'});
|
|
}
|
|
else {
|
|
appmap.set(configitem, {"button": inputname, "friendlyName": friendlyname, "androidName": "", "adbLaunchCommand": "HDMI"+i});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function handlecustomlaunchers(config) {
|
|
// Experimental - Only one of them works through the roku api for some reason ///
|
|
// if (config.device_family == "roku") {
|
|
// appmap.set("roku-secret-screen", {"button": "Secret", "friendlyName": "Function: Secret Screen 1"});
|
|
// }
|
|
|
|
let customlaunchers = config.custom_launchers;
|
|
if(typeof customlaunchers == 'undefined' || customlaunchers == null) {
|
|
return;
|
|
}
|
|
if(customlaunchers.constructor !== Array) {
|
|
customlaunchers = new Array(config.custom_launchers);
|
|
}
|
|
var l = 1;
|
|
customlaunchers.forEach((launcher) => {
|
|
var style = ''; var icon = null; var imagePath = null;
|
|
if (launcher.color) { style = 'color:'+launcher.color+';'; }
|
|
if (launcher.background) { style = style+'background:'+launcher.background+';'; }
|
|
var friendlyname = launcher.friendly_name || launcher.label || "customlauncher "+l;
|
|
var label = launcher.label || launcher.friendly_name || "customlauncher "+l;
|
|
if (launcher.icon) {
|
|
icon = '<div class="customLauncherBackground" style="'+style+'"></div><ha-icon icon="'+launcher.icon+'" class="customLauncherIcon" style="'+style+'"></ha-icon>';
|
|
}
|
|
if (launcher.image_path) {
|
|
imagePath = '<div class="customLauncherBackground" style="'+style+'"></div><img src="'+launcher.image_path+'" alt="'+label+'" class="customLauncherImg">';
|
|
}
|
|
label = '<div class="customLauncherBackground" style="'+style+'"></div><div style="'+style+'" class="customLauncherTxt">'+truncate(label, 10)+'</div>';
|
|
var buttonFace = imagePath || icon || label
|
|
appmap.set("customlauncher "+friendlyname, {"button": buttonFace, "friendlyName": "Custom: "+friendlyname, "script": launcher.script, "data": launcher.data});
|
|
l++;
|
|
})
|
|
}
|
|
|
|
function handleAVInputs(config, avInputs = 0) {
|
|
if (avInputs > 0 && config.device_family == "roku") {
|
|
appmap.set("av1_input", {"button": "AV", "friendlyName": "AV Input", "remoteCommand": '{"command": "input_av1", "num_repeats": 1, "hold_secs": 0}'});
|
|
}
|
|
}
|
|
|
|
function handleTunerInputs(config, tunerInput) {
|
|
if (config.device_family == "roku" && (tunerInput == true || tunerInput == 'true')) {
|
|
appmap.set("tuner_input", {"button": "TV Tuner", "friendlyName": "TV Tuner", "remoteCommand": '{"command": "input_tuner", "num_repeats": 1, "hold_secs": 0}'});
|
|
//appmap.set("roku-tv-channel", {"button": "Channel", "friendlyName": "Function: Input TV Channel"});
|
|
return;
|
|
}
|
|
if (config.device_family == "amazon-fire" && (tunerInput == true || tunerInput == 'true')) {
|
|
appmap.set("tuner_input", {"button": '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="650" height="200" viewBox="0 0 650 200" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><g stroke="none" fill="#fff" fill-rule="nonzero"><path d="M24.387 146.275l9.642 11.491c.643.766 2.694 1.655 4.226.37l45.963-38.567h0c1.286 1.532 3.46 1.013 4.226.37l17.619-14.784 9.862.863c.766-.643 2.175-.52 2.175-.52l7.66-6.428.643.766c1.286 1.532 2.694 1.655 4.226.37l19.917-16.712c1.532-1.286 1.655-2.694.37-4.226l-10.285-12.257 17.619-14.784c1.532-1.286 3.187-3.98 2.668-6.155s-2.448-4.473-4.5-5.362c-2.694-1.655-5.635-.493-7.167.793l-17.619 14.784-10.285-12.257c-1.286-1.532-2.694-1.655-4.226-.37L97.205 60.37c-1.532 1.286-1.655 2.694-.37 4.226l1.286 1.532-7.66 6.428-1.532 1.286-.863 9.862-17.619 14.784c-.766.643-1.655 2.694-.37 4.226l.643.766-45.963 38.567c-1.532 1.286-1.655 2.694-.37 4.226zm76.288-44.432l-13.789 11.57-10.285-12.257 13.789-11.57zm-64.744 50.41l-5.785-6.894 44.431-37.282 5.785 6.894zm92.375-57.93l-3.214-3.83 16.087-13.499 3.214 3.83zM117.378 81.3l16.087-13.499 3.857 4.596-16.087 13.499zm-7.713-9.193l16.087-13.499 3.857 4.596-16.087 13.499zm43.445-26.011c.766-.643.766-.643 1.409.123s.643.766-.123 1.409l-17.619 14.784-1.286-1.532zm-34.428 4.086l3.857 4.596-16.087 13.499-3.857-4.596zm-16.703 20.543l19.926 23.747-6.894 5.785-8.453-.74L93.7 84.197l1.382-7.687zM249 141l-9-22h-35l-8 22h-12l33-85h9l33 85h-11zm-26-71l-15 40h29l-14-40z"/><use xlink:href="#oVi3"/><path d="M340 63h10v15h12v9h-12v39q0 4 2 6 2 2 5 2 2 0 6-1v9q-5 1-9 1-7 0-11-4-3-5-3-13V87h-12v-9h12V63zm62 80q-13 0-21-9-8-8-8-22v-2q0-10 4-17 3-8 10-12 6-4 14-4 12 0 19 8 7 8 7 23v5h-43q0 9 5 15 6 6 14 6 5 0 9-2 4-3 7-7l7 5q-8 13-24 13zm-1-57q-7 0-11 5-5 4-6 13h32v-1q-1-8-5-13-3-4-10-4z"/><use xlink:href="#oVi3" x="169"/><use xlink:href="#oVi3" x="235"/><path d="M621 142h-11q-1-2-2-7-7 8-18 8-9 0-15-6-6-5-6-13 0-10 8-15 7-6 21-6h10v-5q0-6-3-9-4-3-10-3-6 0-10 3-4 3-4 7h-11q0-5 4-9 3-5 9-7 6-3 12-3 11 0 18 5 6 6 6 16v29q0 8 2 14v1zm-29-9q5 0 10-2 4-3 6-7v-13h-8q-20 0-20 11 0 6 3 8 4 3 9 3z"/></g><defs ><path id="oVi3" d="M270 78h10l1 8q7-9 19-9 20 0 20 23v42h-11v-42q0-7-3-11-3-3-10-3-5 0-9 3-4 3-6 7v46h-11V78z"/></defs></svg>',
|
|
"friendlyName": "Antenna",
|
|
"androidName": "com.amazon.tv.livetv",
|
|
"adbLaunchCommand": "adb shell input keyevent KEYCODE_TV"}
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
function refreshAppMap(config, inputs = 0, avInputs = 0, tuner = true){
|
|
resetAppMap();
|
|
handlehdmi(config, inputs);
|
|
handlecustomlaunchers(config);
|
|
handleAVInputs(config, avInputs);
|
|
handleTunerInputs(config, tuner);
|
|
}
|
|
|
|
|
|
function calculateLayoutCellHeight(h, s) {
|
|
let numOfGapPixels = (( h / 56 ) * 8)-24;
|
|
let standardHeight = ( h - numOfGapPixels ) / 56;
|
|
let scale = s / 100;
|
|
let raw = standardHeight * scale;
|
|
let calculated = Math.trunc(raw * Math.pow(10, 2)) / Math.pow(10, 2);
|
|
//console.log('scale is '+s+' so Im returning a cell height of '+calculated);
|
|
return calculated;
|
|
}
|
|
|
|
function calculateLayoutCellWidth(w, s) {
|
|
var medianCellWidth = 104; // between 80px and 120px depending on the screen size - adjust as needed
|
|
let numOfGapPixels = (( w / medianCellWidth ) * 8)-24;
|
|
let scale = s / 100;
|
|
let raw = ( (w - numOfGapPixels) / medianCellWidth) * scale;
|
|
let calculated = Math.ceil(raw);
|
|
//console.log('scale is '+s+' so Im returning a cell width of '+calculated+' raw was '+raw);
|
|
return calculated;
|
|
}
|
|
|
|
function calculateMasonryViewHeight(h, s) {
|
|
let scale = s / 100;
|
|
let raw = (h / 50) * scale;
|
|
let calculated = Math.ceil(raw);
|
|
//console.log('masonryViewHeight - scale is '+s+' so Im returning a cell width of '+calculated+' raw was '+raw);
|
|
return calculated;
|
|
}
|
|
|
|
|
|
|
|
class FiremoteCard extends LitElement {
|
|
|
|
// Create and return an editor element
|
|
static getConfigElement() {
|
|
return document.createElement("firemote-card-editor");
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
hass: {},
|
|
_config: {},
|
|
};
|
|
}
|
|
|
|
// Sets a default card size (height) for masonry dashboard type
|
|
getCardSize(){
|
|
// https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card#sizing-in-masonry-view
|
|
// TODO: This does not account for added app launcher rows
|
|
var scale = this._config.scale || 100;
|
|
switch (deviceAttributeQuery('defaultRemoteStyle', this._config)) {
|
|
case "AF1":
|
|
return calculateMasonryViewHeight(588.38, scale);
|
|
break;
|
|
case "AF2":
|
|
return calculateMasonryViewHeight(634.08, scale);
|
|
break;
|
|
case "AF3":
|
|
return calculateMasonryViewHeight(657.14, scale);
|
|
break;
|
|
case "AF4":
|
|
return calculateMasonryViewHeight(715.94, scale);
|
|
break;
|
|
case "AF5":
|
|
return calculateMasonryViewHeight(772.94, scale);
|
|
break;
|
|
case "AF6":
|
|
return calculateMasonryViewHeight(750.45, scale);
|
|
break;
|
|
case "AFJTV":
|
|
case "AFXF2":
|
|
return calculateMasonryViewHeight(873.02, scale);
|
|
break;
|
|
case "AR1":
|
|
return calculateMasonryViewHeight(747.5, scale);
|
|
break;
|
|
case "AR2":
|
|
return calculateMasonryViewHeight(597, scale);
|
|
break;
|
|
case "AR3":
|
|
return calculateMasonryViewHeight(737, scale);
|
|
break;
|
|
case "CC1":
|
|
case "CC2":
|
|
case "CC3":
|
|
return calculateMasonryViewHeight(696.66, scale);
|
|
break;
|
|
case "NS1":
|
|
case "NS2":
|
|
return calculateMasonryViewHeight(681.98, scale);
|
|
break;
|
|
case "ON1":
|
|
case "ON2":
|
|
return calculateMasonryViewHeight(726.39, scale);
|
|
break;
|
|
case "RVRP":
|
|
case "RVR":
|
|
case "RSR":
|
|
return calculateMasonryViewHeight(680.56, scale);
|
|
break;
|
|
case "RHR":
|
|
case "RWR":
|
|
return calculateMasonryViewHeight(652.56, scale);
|
|
break;
|
|
case "RTR":
|
|
return calculateMasonryViewHeight(680.38, scale);
|
|
break;
|
|
case "XM1":
|
|
case "XM2":
|
|
return calculateMasonryViewHeight(793.98, scale);
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
}
|
|
// Announces a default grid size for new experimental sections dashboard type
|
|
getLayoutOptions() {
|
|
// https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card#sizing-in-sections-view
|
|
// TODO: This does not account for added app launcher rows
|
|
var scale = this._config.scale || 100;
|
|
switch (deviceAttributeQuery('defaultRemoteStyle', this._config)) {
|
|
case "AF1":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(588.38, scale),
|
|
grid_columns: calculateLayoutCellWidth(193.97, scale),
|
|
}
|
|
break;
|
|
case "AF2":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(634.08, scale),
|
|
grid_columns: calculateLayoutCellWidth(193.97, scale),
|
|
}
|
|
break;
|
|
case "AF3":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(657.14, scale),
|
|
grid_columns: calculateLayoutCellWidth(193.97, scale),
|
|
}
|
|
break;
|
|
case "AF4":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(715.94, scale),
|
|
grid_columns: calculateLayoutCellWidth(193.97, scale),
|
|
}
|
|
break;
|
|
case "AF5":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(772.94, scale),
|
|
grid_columns: calculateLayoutCellWidth(193.97, scale),
|
|
}
|
|
break;
|
|
case "AF6":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(750.45, scale),
|
|
grid_columns: calculateLayoutCellWidth(193.97, scale),
|
|
}
|
|
break;
|
|
case "AFJTV":
|
|
case "AFXF2":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(873.02, scale),
|
|
grid_columns: calculateLayoutCellWidth(193.97, scale),
|
|
}
|
|
break;
|
|
case "AR1":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(747.5, scale),
|
|
grid_columns: calculateLayoutCellWidth(184, scale),
|
|
}
|
|
break;
|
|
case "AR2":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(597, scale),
|
|
grid_columns: calculateLayoutCellWidth(184, scale),
|
|
}
|
|
break;
|
|
case "AR3":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(737, scale),
|
|
grid_columns: calculateLayoutCellWidth(184, scale),
|
|
}
|
|
break;
|
|
case "CC1":
|
|
case "CC2":
|
|
case "CC3":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(696.66, scale),
|
|
grid_columns: calculateLayoutCellWidth(203.36, scale),
|
|
}
|
|
break;
|
|
case "HO1":
|
|
case "HO2":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(726.39, scale),
|
|
grid_columns: calculateLayoutCellWidth(193.97, scale),
|
|
}
|
|
break;
|
|
case "HO3":
|
|
case "HO4":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(902.83, scale),
|
|
grid_columns: calculateLayoutCellWidth(193.97, scale),
|
|
}
|
|
break;
|
|
case "NS1":
|
|
case "NS2":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(681.98, scale),
|
|
grid_columns: calculateLayoutCellWidth(137.97, scale),
|
|
}
|
|
break;
|
|
case "ON1":
|
|
case "ON2":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(726.39, scale),
|
|
grid_columns: calculateLayoutCellWidth(137.97, scale),
|
|
}
|
|
break;
|
|
case "RVRP":
|
|
case "RVR":
|
|
case "RSR":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(680.56, scale),
|
|
grid_columns: calculateLayoutCellWidth(183.8, scale),
|
|
}
|
|
break;
|
|
case "RHR":
|
|
case "RWR":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(652.56, scale),
|
|
grid_columns: calculateLayoutCellWidth(183.8, scale),
|
|
}
|
|
break;
|
|
case "RTR":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(680.38, scale),
|
|
grid_columns: calculateLayoutCellWidth(202.02, scale),
|
|
}
|
|
break;
|
|
case "XM1":
|
|
case "XM2":
|
|
return {
|
|
grid_rows: calculateLayoutCellHeight(793.98, scale),
|
|
grid_columns: calculateLayoutCellWidth(193.97, scale),
|
|
}
|
|
break;
|
|
default:
|
|
return {
|
|
//grid_rows: 12.25,
|
|
//grid_columns: 2,
|
|
};
|
|
}
|
|
}
|
|
|
|
|
|
// Returns a minimal configuration that will result in a working card
|
|
static getStubConfig(e) {
|
|
var androidTVEntities = Object.keys(e.entities).filter(
|
|
(eid) => e.entities[eid].platform === 'androidtv'
|
|
);
|
|
var appleTVEntities = Object.keys(e.entities).filter(
|
|
(eid) => e.entities[eid].platform === 'apple_tv'
|
|
);
|
|
var rokuEntities = Object.keys(e.entities).filter(
|
|
(eid) => e.entities[eid].platform === 'roku'
|
|
);
|
|
if (androidTVEntities.length > 0) {
|
|
return { 'entity': androidTVEntities[0],
|
|
'device_family': 'amazon-fire',
|
|
'device_type': 'fire_tv_4_series',
|
|
'compatibility_mode': 'default',
|
|
};
|
|
}
|
|
else if (appleTVEntities.length > 0) {
|
|
return { 'entity': appleTVEntities[0],
|
|
'device_family': 'apple-tv',
|
|
'device_type': 'appletv-4k-gen2',
|
|
'compatibility_mode': 'default',
|
|
};
|
|
}
|
|
else if (rokuEntities.length > 0) {
|
|
return { 'entity': rokuEntities[0],
|
|
'device_family': 'roku',
|
|
'device_type': 'roku-ultra-2020',
|
|
'compatibility_mode': 'default',
|
|
};
|
|
}
|
|
else {
|
|
return { 'entity': '',
|
|
'device_family': 'amazon-fire',
|
|
'device_type': 'fire_tv_4_series',
|
|
'compatibility_mode': 'default',
|
|
};
|
|
}
|
|
}
|
|
|
|
setConfig(config) {
|
|
if (!config.entity) {
|
|
throw new Error("entity must be defined. You need to define an Apple TV, Chromecast, Fire TV, NVIDIA Shield, onn., Roku, Xiaomi Mi, or any other media_player entity");
|
|
}
|
|
this._config = config;
|
|
}
|
|
|
|
static styles = css`
|
|
|
|
ha-card {
|
|
background: rgba(30,30,30,0);
|
|
display: grid;
|
|
justify-content: center;
|
|
padding: 0;
|
|
margin: auto;
|
|
box-shadow: none;
|
|
border: 0;
|
|
outline: 0;
|
|
isolation: isolate;
|
|
direction: ltr;
|
|
-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.mdiSubstituteIconWrapper {
|
|
pointer-events: none;
|
|
transform: scale(var(--sz));
|
|
}
|
|
|
|
.mdiSubstitueIcon {
|
|
display: var(--ha-icon-display,inline-flex);
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
fill: var(--icon-primary-color,currentcolor);
|
|
width: var(--mdc-icon-size,24px);
|
|
height: var(--mdc-icon-size,24px);
|
|
}
|
|
|
|
.shield-remote-body {
|
|
background: linear-gradient(90deg, rgba(22,21,21,1) 0%, rgba(37,37,37,1) 10%, rgba(37,37,37,1) 90%, rgba(22,21,21,1) 100%);
|
|
border: solid #252525 calc(var(--sz) * 0.14rem);
|
|
padding: calc(var(--sz) * 1.428rem) calc(var(--sz) * 0.714rem) calc(var(--sz) * 2.143rem) calc(var(--sz) * 0.714rem);
|
|
display: grid;
|
|
justify-items: center;
|
|
align-content: flex-start;
|
|
grid-column-gap: calc(var(--sz) * 1.2rem);
|
|
grid-row-gap: calc(var(--sz) * 0.5rem);
|
|
grid-template-columns: 1fr 1fr;
|
|
width: calc(var(--sz) * 8.286rem);
|
|
min-height: calc(var(--sz) * 45rem);
|
|
}
|
|
|
|
.shield-remote-body.ns1-body {
|
|
background: linear-gradient(90deg, rgb(28 28 28) 0%, rgb(37, 37, 37) 8%, rgb(40 40 40) 50%, rgb(37, 37, 37) 92%, rgb(28, 28, 28) 100%);
|
|
border: solid #1c1c1c calc(var(--sz) * 0.14rem);
|
|
border-radius: calc(var(--sz) * 1.2rem);
|
|
}
|
|
|
|
.roku-remote-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-content: center;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: calc(var(--sz) * 1rem);
|
|
background: linear-gradient(90deg, rgba(42,42,42,1) 0%, rgba(58,58,58,1) 50%, rgba(42,42,42,1) 100%);
|
|
border-radius: calc(var(--sz) * 3.25rem);
|
|
border: solid #252525 calc(var(--sz) * 0.6rem);
|
|
border-top: solid #292929 calc(var(--sz) * 0.6rem);
|
|
width: calc(var(--sz) * 11.287rem);
|
|
padding: calc(var(--sz) * 0.35rem);
|
|
padding-bottom: calc(var(--sz) * 1.12rem);
|
|
min-height: calc(var(--sz) * 44rem);
|
|
}
|
|
|
|
.roku-remote-body:has(div.rokuTag) {
|
|
margin-bottom: calc(var(--sz) * 2rem);
|
|
}
|
|
|
|
.roku-remote-body ha-icon {
|
|
transform: scale(calc(var(--sz) * .8));
|
|
}
|
|
|
|
.roku-remote-body > div {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
flex-direction: row;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: calc(var(--sz) * 0.35rem);
|
|
}
|
|
|
|
.roku-remote-body > div:not(.rokuDPadContainer) > button:active {
|
|
box-shadow: none !important;
|
|
transform: scale(0.975);
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
.roku-remote-body > div:not(.rokuDPadContainer) > button:active > ha-icon {
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.roku-remote-body.RVR > div.powerRow {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
align-items: center;
|
|
justify-items: center;
|
|
margin-bottom: calc(var(--sz) * 1rem);
|
|
}
|
|
|
|
.roku-remote-body.RTR {
|
|
border-radius: calc(var(--sz) * 6rem);
|
|
padding: calc(var(--sz) * 1rem);
|
|
}
|
|
|
|
.roku-remote-body.RWR > div.powerRow,
|
|
.roku-remote-body.RTR > div.powerRow,
|
|
.roku-remote-body.RHR > div.powerRow {
|
|
margin-bottom: calc(var(--sz) * 1.25rem);
|
|
}
|
|
|
|
.roku-remote-body > div.micRow {
|
|
height: calc(var(--sz) * 0.4rem);
|
|
aspect-ratio: 1;
|
|
background: black;
|
|
border-radius: 100%;
|
|
margin-top: calc(var(--sz) * 0.4rem);
|
|
}
|
|
|
|
.roku-remote-body.RVR div.micRow {
|
|
height: calc(var(--sz) * 0.4rem);
|
|
aspect-ratio: 1;
|
|
background: black;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.roku-remote-body.RSR > div.backHomeRow {
|
|
padding-top: calc(var(--sz) * 5rem);
|
|
}
|
|
|
|
.roku-remote-body > div.backHomeRow > button{
|
|
height: calc(var(--sz) * 2.5rem);
|
|
width: calc(var(--sz) * 5.25rem);
|
|
border: solid #090909 calc(var(--sz) * 0.125rem);
|
|
border-radius: calc(var(--sz) * 0.7rem);
|
|
box-shadow: 0px 5px 2px 0px #0000001a;
|
|
}
|
|
|
|
.roku-remote-body > div.rokuDPadContainer {
|
|
background: linear-gradient(175deg, rgb(42 42 42) 0%, rgb(51 51 51) 100%);
|
|
padding: calc(var(--sz) * 0.3rem);
|
|
border-radius: calc(var(--sz) * 1.5rem);
|
|
display: grid;
|
|
grid-template-columns: 31% 38% 31%;
|
|
grid-template-rows: 31% 38% 31%;
|
|
grid-gap: 0;
|
|
width: calc(var(--sz) * 10.15rem);
|
|
height: calc(var(--sz) * 10.15rem);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.roku-remote-body.RTR > div.rokuDPadContainer {
|
|
padding: calc(var(--sz) * 0.75rem);
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.rokuDPadContainer > button {
|
|
background: #662d91;
|
|
color: rgb(198, 198, 198);
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
line-height: normal;
|
|
user-select: none;
|
|
display: grid;
|
|
place-content: center;
|
|
border: 0;
|
|
aspect ratio: 1;
|
|
font-size: calc(var(--sz) * 1.275rem);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.rokuDPadContainer > button > ha-icon {
|
|
transform: scale(calc(var(--sz) * 1.3));
|
|
}
|
|
|
|
.rokuDPadContainer > button:active > ha-icon, .rokuDPadContainer > button:active > .okCircle {
|
|
color: #bcbcbc;
|
|
transform: scale(calc(var(--sz) * 0.85));
|
|
}
|
|
|
|
.roku-remote-body #up-button {
|
|
transform-origin: bottom center;
|
|
border-radius: calc(var(--sz) * 1rem) calc(var(--sz) * 1rem) 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
.roku-remote-body #left-button {
|
|
transform-origin: center right;
|
|
border-radius: calc(var(--sz) * 1rem) 0 0 calc(var(--sz) * 1rem);
|
|
box-shadow: 0px 5px 2px 0px #0000001a;
|
|
}
|
|
|
|
.roku-remote-body #right-button {
|
|
border-radius: 0 calc(var(--sz) * 1rem) calc(var(--sz) * 1rem) 0;
|
|
transform-origin: center left;
|
|
box-shadow: 0px 5px 2px 0px #0000001a;
|
|
z-index: 1;
|
|
}
|
|
|
|
.roku-remote-body #down-button {
|
|
transform-origin: top center;
|
|
border-radius: 0 0 calc(var(--sz) * 1rem) calc(var(--sz) * 1rem);
|
|
box-shadow: 0px 5px 2px 0px #0000001a;
|
|
}
|
|
|
|
.roku-remote-body #center-button {
|
|
z-index: 3;
|
|
}
|
|
|
|
.roku-remote-body #up-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
bottom: 0;
|
|
left: calc(var(--sz) * -1.95rem);
|
|
border-radius: 100%;
|
|
height: calc(var(--sz) * 2rem);
|
|
width: calc(var(--sz) * 2rem);
|
|
background: transparent;
|
|
box-shadow: calc(var(--sz) * 1rem) calc(var(--sz) * 1rem) 0 rgb(102, 45, 145);
|
|
}
|
|
|
|
.roku-remote-body #up-button::after {
|
|
content: '';
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
bottom: 0;
|
|
right: calc(var(--sz) * -1.95rem);
|
|
border-radius: 100%;
|
|
height: calc(var(--sz) * 2rem);
|
|
width: calc(var(--sz) * 2rem);
|
|
background: transparent;
|
|
box-shadow: calc(var(--sz) * -1rem) calc(var(--sz) * 1rem) 0 rgb(102, 45, 145);
|
|
}
|
|
|
|
.roku-remote-body #down-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
top: 0;
|
|
left: calc(var(--sz) * -1.95rem);
|
|
border-radius: 100%;
|
|
height: calc(var(--sz) * 2rem);
|
|
width: calc(var(--sz) * 2rem);
|
|
background: transparent;
|
|
box-shadow: calc(var(--sz) * 1rem) calc(var(--sz) * -1rem) 0 rgb(102, 45, 145);
|
|
}
|
|
|
|
.roku-remote-body #down-button::after {
|
|
content: '';
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
top: 0;
|
|
right: calc(var(--sz) * -1.95rem);
|
|
border-radius: 100%;
|
|
height: calc(var(--sz) * 2rem);
|
|
width: calc(var(--sz) * 2rem);
|
|
background: transparent;
|
|
box-shadow: calc(var(--sz) * -1rem) calc(var(--sz) * -1rem) 0 rgb(102, 45, 145);
|
|
}
|
|
|
|
.rokuDPadContainer > button:not(#center-button):active {
|
|
box-shadow: unset;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.okCircle {
|
|
padding: calc(var(--sz) * .75rem);
|
|
border-radius: 100%;
|
|
border: calc(var(--sz) * 0.15rem) solid rgb(88 38 125);
|
|
background: linear-gradient(175deg, rgb(165 165 165 / 20%) 10%, rgb(29 29 29 / 20%) 100%);
|
|
margin: 0;
|
|
place-self: center;
|
|
display: flex;
|
|
place-content: center;
|
|
align-items: center;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
aspect-ratio: 1/1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rokuDPadContainer > button:active > .okCircle {
|
|
color: #bcbcbc;
|
|
transform: scale(calc(var(--sz) * 0.8));
|
|
filter: brightness(0.9);
|
|
}
|
|
|
|
.roku-remote-body > div.replayVoiceOptionsRow,
|
|
.roku-remote-body > div.scrubRow,
|
|
.roku-remote-body > div.personalShortcutsRow {
|
|
width: calc(var(--sz) * 10.15rem);
|
|
display: grid;
|
|
grid-template-columns: 35% 22% 35%;;
|
|
justify-content: center;
|
|
place-content: center space-between;
|
|
place-items: center;
|
|
justify-items: stretch;
|
|
align-items: center;
|
|
}
|
|
|
|
.roku-remote-body.RVR > div.replayVoiceOptionsRow {
|
|
grid-template-columns: 25% 38% 25%;
|
|
}
|
|
|
|
.roku-remote-body.RSR > div.replayVoiceOptionsRow,
|
|
.roku-remote-body.RTR > div.replayVoiceOptionsRow {
|
|
grid-template-columns: 47% 47%;
|
|
}
|
|
|
|
.roku-remote-body > div.replayVoiceOptionsRow button,
|
|
.roku-remote-body > div.scrubRow button,
|
|
.roku-remote-body > div.personalShortcutsRow button {
|
|
height: calc(var(--sz) * 2.25rem);
|
|
width: 100%;
|
|
border: solid #090909 calc(var(--sz) * 0.125rem);
|
|
border-radius: calc(var(--sz) * 0.7rem);
|
|
box-shadow: 0px 5px 2px 0px #0000001a;
|
|
}
|
|
|
|
.roku-remote-body > div.scrubRow {
|
|
grid-template-columns: 22% 48% 22%;
|
|
}
|
|
|
|
.roku-remote-body.RVR > div.scrubRow,
|
|
.roku-remote-body.RSR > div.scrubRow,
|
|
.roku-remote-body.RWR > div.scrubRow {
|
|
margin-bottom: calc(var(--sz) * 0.75rem);
|
|
}
|
|
|
|
.roku-remote-body > div.scrubRow button {
|
|
height: calc(var(--sz) * 3rem);
|
|
}
|
|
|
|
.roku-remote-body > div.personalShortcutsRow {
|
|
grid-template-columns: 31% 31%;
|
|
gap: calc(var(--sz) * 1.75rem);
|
|
justify-content: center;
|
|
padding: calc(var(--sz) * 0.3rem) 0 calc(var(--sz) * 0.6rem) 0;
|
|
}
|
|
|
|
.roku-remote-body > div.personalShortcutsRow > button > ha-icon {
|
|
transform: scale(var(--sz));
|
|
}
|
|
|
|
.roku-remote-body .appLauncherAppsContainer {
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
grid-row-gap: calc(var(--sz) * 1rem);
|
|
align-items: center;
|
|
justify-items: center;
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.roku-remote-body.RHR .appLauncherAppsContainer {
|
|
padding: calc(var(--sz) * 1rem) 0 calc(var(--sz) * 4rem) 0;
|
|
}
|
|
|
|
.roku-remote-body.RWR .appLauncherAppsContainer {
|
|
padding-bottom: calc(var(--sz) * 6rem);
|
|
}
|
|
|
|
.roku-remote-body .appLauncherAppsContainer > button {
|
|
height: calc(var(--sz) * 1.8rem);
|
|
width: calc(var(--sz) * 5.1426rem);
|
|
border-radius: calc(var(--sz) * 0.7rem);
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
}
|
|
|
|
.roku-remote-body .appLauncherVerticalAppsContainer {
|
|
display: grid;
|
|
margin-top: calc(var(--sz) * 1.25rem);
|
|
gap: calc(var(--sz) * 1rem);
|
|
}
|
|
|
|
.rokuBrandLogo {
|
|
padding: calc(var(--sz) * 1rem) 0;
|
|
}
|
|
|
|
.RHR .rokuBrandLogo,
|
|
.RWR .rokuBrandLogo {
|
|
position: absolute;
|
|
bottom: calc(var(--sz) * 2rem);
|
|
}
|
|
|
|
.RTR .rokuBrandLogo {
|
|
padding: calc(var(--sz) * 1rem) 0 calc(var(--sz) * 2.25rem) 0;
|
|
}
|
|
|
|
.rokuBrandLogo svg {
|
|
height: calc(var(--sz) * 1.15rem);
|
|
max-width: calc(var(--sz) * 11.287rem);
|
|
}
|
|
|
|
.RHR .rokuBrandLogo svg {
|
|
height: calc(var(--sz) * 0.8rem);
|
|
}
|
|
|
|
.RWR .rokuBrandLogo svg {
|
|
height: calc(var(--sz) * 3.1rem);
|
|
}
|
|
|
|
.roku-remote-body .rokuTag {
|
|
position: absolute;
|
|
height: calc(var(--sz) * 2.2rem);
|
|
width: calc(var(--sz) * 5.6rem);
|
|
background: repeating-linear-gradient(#662D91, #662D91 calc(var(--sz) * 0.15rem), #3b1955 calc(var(--sz) * 0.15rem), #3b1955 calc(var(--sz) * 0.3rem));
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
padding: calc(var(--sz) * 1.1rem);
|
|
border: solid #662d91 calc(var(--sz) * 0.1rem);
|
|
border-top: none;
|
|
border-bottom: none;
|
|
-webkit-clip-path: polygon(7% 5%, 93% 5%, 100% 0, 100% 100%, 0 100%, 0 0);
|
|
clip-path: polygon(7% 5%, 93% 5%, 100% 0, 100% 100%, 0 100%, 0 0);
|
|
}
|
|
|
|
.chromecast-remote-body {
|
|
background: #ebebea;
|
|
border-radius: calc(var(--sz) * 6rem);
|
|
border: solid #cfcfcf calc(var(--sz) * 0.1rem);
|
|
width: calc(var(--sz) * 11.287rem);
|
|
padding: calc(var(--sz) * 0.35rem);
|
|
padding-bottom: calc(var(--sz) * 4rem);
|
|
display: grid;
|
|
justify-items: center;
|
|
align-content: flex-start;
|
|
grid-column-gap: calc(var(--sz) * 1.2rem);
|
|
grid-row-gap: calc(var(--sz) * 0.6rem);
|
|
grid-template-columns: 1fr 1fr;
|
|
min-height: calc(var(--sz) * 37rem);
|
|
}
|
|
|
|
.chromecast-remote-body.CC2 {
|
|
background: #cad4d8;
|
|
}
|
|
|
|
.chromecast-remote-body.CC3 {
|
|
background: #e1d2cc;
|
|
}
|
|
|
|
.apple-remote-body {
|
|
background: #b5b5b5;
|
|
background: linear-gradient(0deg, rgba(147,148,150,1) 0%, rgba(207,211,213,1) 100%);
|
|
border: solid #d1d1d1 calc(var(--sz) * 0.05rem);
|
|
border-radius: calc(var(--sz) * 1.75rem);
|
|
display: grid;
|
|
justify-items: center;
|
|
align-content: flex-start;
|
|
grid-column-gap: calc(var(--sz) * 1rem);
|
|
grid-row-gap: calc(var(--sz) * 0.5rem);
|
|
grid-template-columns: 1fr 1fr;
|
|
width: calc(var(--sz) * 13rem);
|
|
min-height: calc(var(--sz) * 51rem);
|
|
padding-bottom: calc(var(--sz) * 1.5rem);
|
|
}
|
|
|
|
.apple-remote-body.AR1 {
|
|
padding-top: calc(var(--sz) * 4.75rem);
|
|
min-height: calc(var(--sz) * 47rem);
|
|
grid-column-gap: calc(var(--sz) * 0.25rem);
|
|
grid-row-gap: calc(var(--sz) * 0.75rem);
|
|
font-size: calc(var(--sz) * 1rem);
|
|
}
|
|
|
|
.apple-remote-body.AR2 {
|
|
background: linear-gradient(30deg, rgb(0, 0, 0) 0%, rgb(41, 41, 41) 70%);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
grid-row-gap: 0;
|
|
border: solid #2d2d2d calc(var(--sz) * 0.01rem);
|
|
min-height: calc(var(--sz) * 41rem);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.AR2TopSection, .AR2BottomSection {
|
|
display: grid;
|
|
justify-items: center;
|
|
align-content: flex-start;
|
|
grid-column-gap: calc(var(--sz) * 1.5rem);
|
|
grid-row-gap: calc(var(--sz) * 0.5rem);
|
|
grid-template-columns: 1fr 1fr;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.AR2TopSection {
|
|
background: linear-gradient(0deg, rgba(46,46,46,1) 0%, rgba(59,59,59,1) 100%);
|
|
height: 100%;
|
|
width: 100%;
|
|
padding-bottom: calc(var(--sz) * 0.25rem);
|
|
}
|
|
|
|
.AR2BottomSection {
|
|
padding-top: calc(var(--sz) * 0.5rem);
|
|
}
|
|
|
|
.apple-remote-body.AR2 > div > button:nth-of-type(odd), .apple-remote-body.AR3 > button:nth-of-type(odd) {
|
|
justify-self: self-end;
|
|
transform-origin: center center;
|
|
}
|
|
|
|
.apple-remote-body.AR2 > div > button:nth-of-type(even), .apple-remote-body.AR3 > button:nth-of-type(even) {
|
|
justify-self: self-start;
|
|
transform-origin: center center;
|
|
}
|
|
|
|
.remote-body {
|
|
background: linear-gradient(90deg, rgba(27,27,27,1) 0%, rgba(37,37,37,1) 8%, rgba(55,55,55,1) 50%,
|
|
rgba(37,37,37,1) 92%, rgba(27,27,27,1) 100%);
|
|
border: solid #252525 calc(var(--sz) * 0.14rem);
|
|
border-radius: calc(var(--sz) * 8rem) calc(var(--sz) * 8rem) calc(var(--sz) * 8rem) calc(var(--sz) * 8rem) / calc(var(--sz) * 2.5rem) calc(var(--sz) * 2.5rem) calc(var(--sz) * 2.5rem) calc(var(--sz) * 2.5rem);
|
|
padding: calc(var(--sz) * 1.428rem) calc(var(--sz) * 0.714rem) calc(var(--sz) * 2.143rem) calc(var(--sz) * 0.714rem);
|
|
display: grid;
|
|
justify-items: center;
|
|
grid-column-gap: calc(var(--sz) * 0.14rem);
|
|
grid-row-gap: calc(var(--sz) * 0.5rem);
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
width: calc(var(--sz) * 12.286rem);
|
|
}
|
|
|
|
.remote-body.AF6 {
|
|
border-radius: calc(var(--sz) * 2.8rem);
|
|
}
|
|
|
|
.XM2 {
|
|
min-height: calc(var(--sz) * 53rem);
|
|
grid-template-rows: repeat(7, auto) 1fr;
|
|
border-radius: calc(var(--sz) * 2rem);
|
|
}
|
|
|
|
.AL1, .AL2 {
|
|
display: block;
|
|
width: unset;
|
|
border-radius: calc(var(--sz) * 0.5rem);
|
|
padding: calc(var(--sz) * 1.4rem) calc(var(--sz) * 0.714rem);
|
|
}
|
|
|
|
.two-col-span {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
width: 100%;
|
|
display: grid;
|
|
justify-content: center;
|
|
grid-row-gap: calc(var(--sz) * 0.143rem);
|
|
align-content: center;
|
|
}
|
|
|
|
.three-col-span {
|
|
grid-column-start: 1;
|
|
grid-column-end: 4;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-column-gap: calc(var(--sz) * 0.143rem);
|
|
grid-template-columns: 50% 50%;
|
|
align-content: center;
|
|
}
|
|
|
|
.apple-tv-top {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
width: calc(var(--sz) * 11.286rem);
|
|
justify-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-content: center;
|
|
padding-top: calc(var(--sz) * 0.85rem);
|
|
}
|
|
|
|
.remote-body #channel-up-button, .remote-body #channel-down-button {
|
|
--mdc-icon-size: 38px;
|
|
}
|
|
|
|
.nsappsgrid {
|
|
display: grid;
|
|
grid-row-gap: calc(var(--sz) * 0.6rem);
|
|
}
|
|
|
|
.afappsgrid {
|
|
display: grid;
|
|
margin-top: calc(var(--sz) * 0.57rem);
|
|
row-gap: calc(var(--sz) * 0.9rem);
|
|
justify-items: center;
|
|
}
|
|
|
|
.XM2 .afappsgrid {
|
|
margin-bottom: calc(var(--sz) * 0.57rem);
|
|
}
|
|
|
|
.appLauncherAppsContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
align-content: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: calc(var(--sz) * 0.9rem);
|
|
}
|
|
|
|
.ns1-wings {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
width: 100%;
|
|
height: calc(var(--sz) * 25rem);
|
|
margin-top: calc(var(--sz) * -1rem);
|
|
display: grid;
|
|
grid-template-columns: 1fr 27% 1fr;
|
|
}
|
|
|
|
#ns1spine {
|
|
display: grid;
|
|
padding: calc(var(--sz) * 4rem) 0;
|
|
}
|
|
|
|
#ns1spine button {
|
|
all: unset;
|
|
background: transparent;
|
|
}
|
|
|
|
#ns1spine button:active {
|
|
background: #363636;
|
|
}
|
|
|
|
#wingL {
|
|
background: rgb(28 28 28);
|
|
-webkit-clip-path: polygon(100% 15%, 100% 85%, 0 100%, 0 0);
|
|
clip-path: polygon(100% 15%, 100% 85%, 0 100%, 0 0);
|
|
margin-left: calc(var(--sz) *-.714rem);
|
|
border-right: solid #121212 calc(var(--sz) * .15rem);
|
|
}
|
|
|
|
#wingR {
|
|
background: rgb(28 28 28);
|
|
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 85%, 0 15%);
|
|
clip-path: polygon(100% 0, 100% 100%, 0 85%, 0 15%);
|
|
margin-right: calc(var(--sz) *-.714rem);
|
|
border-left: solid #121212 calc(var(--sz) * .15rem);
|
|
}
|
|
|
|
.ALControlsContainer {
|
|
display: flex;
|
|
gap: calc(var(--sz) * .25rem);
|
|
place-items: center;
|
|
padding-top: calc(var(--sz) * 2rem);
|
|
margin-top: calc(var(--sz) * 2rem);
|
|
border-top: groove rgb(0 0 0 / 42%) calc(var(--sz) * 0.2rem);
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
}
|
|
|
|
.ALControlsContainer.noApps {
|
|
padding-top: 0;
|
|
margin-top: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
.ALControlsContainer > div {
|
|
display: grid;
|
|
justify-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.left-pocket-controls {
|
|
display: flex;
|
|
column-gap: calc(var(--sz) * 2rem);
|
|
row-gap: calc(var(--sz) * 0.5rem);
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ALControlsContainer .row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(var(--sz) * 0.5rem);
|
|
padding: calc(var(--sz) * 0.75rem);
|
|
background: rgb(255 255 255 / 6%);
|
|
border: inset #000 calc(var(--sz) * 0.2rem);
|
|
}
|
|
|
|
.ALControlsContainer .row.noframes {
|
|
background: none;
|
|
border: 0;
|
|
}
|
|
|
|
.right-pocket-controls > .row {
|
|
column-gap: calc(var(--sz) * 0.5rem);
|
|
line-height: calc(var(--sz) * .4rem);
|
|
}
|
|
|
|
.remote-button {
|
|
height: calc(var(--sz) * 3.572rem);
|
|
width: calc(var(--sz) * 3.572rem);
|
|
border: solid black calc(var(--sz) * 0.0714rem);
|
|
border-radius: 100%;
|
|
display: grid;
|
|
justify-content: center;
|
|
align-content: center;
|
|
color: rgb(198 198 198);
|
|
background: rgb(33 33 33);
|
|
box-shadow: rgb(0 0 0 / 13%) 0 calc(var(--sz) * 0.214rem) calc(var(--sz) * 0.143rem 0);
|
|
cursor: pointer;
|
|
line-height: normal;
|
|
user-select: none;
|
|
padding: calc(var(--sz) * 0.2857rem);
|
|
}
|
|
|
|
#power-button {
|
|
height: calc(var(--sz) * 2.8rem);
|
|
width: calc(var(--sz) * 2.8rem);
|
|
margin-bottom: calc(var(--sz) * -0.643rem);
|
|
}
|
|
|
|
.shield-remote-body .remote-button {
|
|
height: calc(var(--sz) * 3rem);
|
|
width: calc(var(--sz) * 3rem);
|
|
}
|
|
|
|
.apple-remote-body .remote-button {
|
|
height: calc(var(--sz) * 4.75rem);
|
|
width: calc(var(--sz) * 4.75rem);
|
|
}
|
|
|
|
.apple-remote-body.AR2 .remote-button {
|
|
height: calc(var(--sz) * 4.5rem);
|
|
width: calc(var(--sz) * 4.5rem);
|
|
}
|
|
|
|
.apple-remote-body.AR1 #back-button.remote-button, .apple-remote-body.AR2 #back-button.remote-button {
|
|
font-size: calc(var(--sz) * 1rem);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.apple-remote-body.AR2 #search-button.remote-button, .apple-remote-body.AR3 #back-button.remote-button {
|
|
background: linear-gradient(rgb(0, 0, 0) 0%, rgb(48, 48, 48) 100%);
|
|
outline: solid #2b2b2b calc(var(--sz) * 0.01rem);
|
|
}
|
|
|
|
|
|
.chromecast-remote-body .remote-button, .chromecast-remote-body #keyboard-button {
|
|
background: #fff;
|
|
border: solid #bfbfbf calc(var(--sz) * 0.02em);
|
|
height: calc(var(--sz) * 4.2rem);
|
|
width: calc(var(--sz) * 4.2rem);
|
|
box-shadow: rgb(0 0 0 / 5%) 0 calc(var(--sz) * 0.214rem) calc(var(--sz) * 0.1428rem) 0;
|
|
}
|
|
|
|
.chromecast-remote-body.CC2 .remote-button {
|
|
background: #d5e0e4;
|
|
border-color: #a6a6a6;
|
|
}
|
|
|
|
.chromecast-remote-body.CC3 .remote-button {
|
|
background: #efddd6;
|
|
border-color: #bababa;
|
|
}
|
|
|
|
.chromecast-remote-body .srcButton {
|
|
border: solid #bfbfbf calc(var(--sz) * 0.02em);
|
|
height: calc(var(--sz) * 4.2rem);
|
|
width: calc(var(--sz) * 4.2rem);
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.chromecast-remote-body #keyboard-button {
|
|
background: #484848;
|
|
}
|
|
|
|
.chromecast-remote-body #keyboard-button > ha-icon {
|
|
color: rgb(235, 235, 234);
|
|
}
|
|
|
|
.chromecast-remote-body.CC2 #keyboard-button {
|
|
background: linear-gradient(0deg, rgba(186,214,198,1) 0%, rgba(222,239,231,1) 90%);
|
|
border-color: #a6a6a6;
|
|
}
|
|
|
|
.chromecast-remote-body.CC3 #keyboard-button {
|
|
background: linear-gradient(0deg, rgba(221,158,152,1) 0%, rgba(228,186,180,1) 90%);
|
|
border-color: #a6a6a6;
|
|
}
|
|
|
|
.chromecast-remote-body.CC2 #keyboard-button > ha-icon,
|
|
.chromecast-remote-body.CC3 #keyboard-button > ha-icon {
|
|
color: #fff;
|
|
}
|
|
|
|
.apple-remote-body .srcButton {
|
|
border: solid #bfbfbf calc(var(--sz) * 0.02em);
|
|
height: calc(var(--sz) * 4.75rem);
|
|
width: calc(var(--sz) * 4.75rem);
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.shield-remote-body #power-button, .XM2 #power-button{
|
|
height: calc(var(--sz) * 3rem);
|
|
width: calc(var(--sz) * 3rem);
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
.XM2 #power-button, .XM2 #keyboard-button, .AL2 #power-button, .AL2 #keyboard-button {
|
|
height: calc(var(--sz) * 3.572rem);
|
|
width: calc(var(--sz) * 3.572rem);
|
|
}
|
|
|
|
.roku-remote-body #keyboard-button {
|
|
height: calc(var(--sz) * 2.25rem);
|
|
width: 100%;
|
|
}
|
|
|
|
.AL2 #power-button {
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.apple-remote-body #power-button {
|
|
background: none;
|
|
border: gray 0.01rem solid;
|
|
transform: scale(0.75);
|
|
margin: 0;
|
|
}
|
|
|
|
.shield-remote-body #power-button > ha-icon {
|
|
color: #851313;
|
|
}
|
|
|
|
.apple-remote-body #power-button > ha-icon {
|
|
color: rgb(33, 33, 33);
|
|
}
|
|
|
|
.roku-remote-body #power-button > ha-icon {
|
|
color: #970000;
|
|
}
|
|
|
|
.XM2 #power-button > ha-icon {
|
|
color: #835437;
|
|
}
|
|
|
|
#headset-button {
|
|
height: calc(var(--sz) * 2.8rem);
|
|
width: calc(var(--sz) * 2.8rem);
|
|
margin-bottom: calc(var(--sz) * -0.643rem);
|
|
}
|
|
|
|
.shield-remote-body #home-button {
|
|
--mdc-icon-size: 17px;
|
|
}
|
|
|
|
.shield-remote-body.ns1-body #home-button {
|
|
--mdc-icon-size: 23px;
|
|
}
|
|
|
|
.apple-remote-body #back-button {
|
|
--mdc-icon-size: 36px;
|
|
}
|
|
|
|
.shield-remote-body #back-button {
|
|
--mdc-icon-size: 41px;
|
|
}
|
|
|
|
.notch {
|
|
background: #181818;
|
|
height: calc(var(--sz) * 1rem);
|
|
width: calc(var(--sz) * 0.4rem);
|
|
margin-top: calc(var(--sz) * -0.5rem);
|
|
border-radius: calc(var(--sz) * 0.2rem);
|
|
}
|
|
|
|
.apple-remote-body .notch {
|
|
margin: 0;
|
|
width: calc(var(--sz) * 1rem);
|
|
height: calc(var(--sz) * 0.4rem);
|
|
}
|
|
|
|
.chromecast-remote-body .notch {
|
|
height: calc(var(--sz) * 0.8rem);
|
|
width: calc(var(--sz) * 0.3rem);
|
|
rotate: 90deg;
|
|
margin: 0;
|
|
}
|
|
|
|
.shieldNotch {
|
|
grid-column: 1 / 3;
|
|
background: rgb(24, 24, 24);
|
|
height: calc(var(--sz) * 0.3rem);
|
|
width: calc(var(--sz) * 0.75rem);
|
|
margin-top: calc(var(--sz) * -0.5rem);
|
|
border-radius: calc(var(--sz) * 0.2rem);
|
|
}
|
|
|
|
.notchtall {
|
|
margin-bottom: calc(var(--sz) * 1.65rem);
|
|
}
|
|
|
|
.ns1-body .shieldNotch {
|
|
height: calc(var(--sz) * 0.75rem);
|
|
width: calc(var(--sz) * 2.2rem);
|
|
border: solid #282828 calc(var(--sz) * 0.12rem);
|
|
border-radius: calc(var(--sz) * 0.5rem);
|
|
}
|
|
|
|
#keyboard-button {
|
|
height: calc(var(--sz) * 3rem);
|
|
width: calc(var(--sz) * 3rem);
|
|
}
|
|
|
|
.teal {
|
|
background: #09727e;
|
|
}
|
|
|
|
.dpadContainer{
|
|
grid-column: 1 / 4;
|
|
display: grid;
|
|
margin-bottom: calc(var(--sz) * 0.65rem);
|
|
width: calc(var(--sz) * 11.286rem);
|
|
height: calc(var(--sz) * 11.286rem);
|
|
position: relative;
|
|
}
|
|
|
|
.chromecast-remote-body .dpadContainer,
|
|
.apple-remote-body .dpadContainer {
|
|
grid-column: 1 / 3;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.apple-remote-body.AR2 .dpadContainer {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.XM2 .dpadContainer,
|
|
.XM.dpadContainer {
|
|
align-items: center;
|
|
justify-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.shieldDpad {
|
|
grid-column: 1 / 3;
|
|
width: calc(var(--sz) * 8.2rem);
|
|
height: calc(var(--sz) * 8.2rem);
|
|
position: relative;
|
|
}
|
|
|
|
.ALControlsContainer .dpadContainer {
|
|
grid-column: unset;
|
|
}
|
|
|
|
.centerbutton{
|
|
all: unset;
|
|
cursor: pointer;
|
|
border: solid black calc(var(--sz) * 0.0714rem);
|
|
margin-left: calc(var(--sz) * 2.357rem);
|
|
margin-top: calc(var(--sz) * 2.357rem);
|
|
width: calc(var(--sz) * 6.428rem);
|
|
height: calc(var(--sz) * 6.428rem);
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
background: rgba(55,55,55,1);
|
|
box-shadow: inset 0 0.calc(var(--sz) * 2857rem) calc(var(--sz) * 0.1428rem) calc(var(--sz) * -0.1428rem) #000000d9;
|
|
z-index: 5;
|
|
}
|
|
|
|
.directionButtonContainer{
|
|
transform: rotate(45deg);
|
|
border: calc(var(--sz) * 0.0714rem) solid black;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
box-shadow: rgb(20 20 20) calc(var(--sz) * 0.1428rem) calc(var(--sz) * 0.1428rem) calc(var(--sz) * 0.4285rem);
|
|
position: relative;
|
|
}
|
|
|
|
.AR2 .directionButtonContainer {
|
|
margin-top: calc(var(--sz) * -1.4rem);
|
|
margin-left: calc(var(--sz) * -1.35rem);
|
|
border-radius: 0;
|
|
border: 0;
|
|
overflow: unset;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.chromecast-remote-body .directionButtonContainer,
|
|
.CC .directionButtonContainer {
|
|
border: calc(var(--sz) * 0.0714rem) solid #9d9d9d;
|
|
box-shadow: rgb(0 0 0 / 29%) 0 0 calc(var(--sz) * 0.4rem) calc(var(--sz) * 0.02rem);
|
|
}
|
|
|
|
.dpadbutton{
|
|
all: unset;
|
|
cursor: pointer;
|
|
width: calc(var(--sz) * 5.5714rem);
|
|
height: calc(var(--sz) * 5.5714rem);
|
|
background: #141414;
|
|
color: white;
|
|
font-size: calc(var(--sz) * 1rem);
|
|
outline: solid #2e2e2e calc(var(--sz) * 0.0714rem);
|
|
}
|
|
|
|
.AR2 .dpadbutton {
|
|
width: calc(var(--sz) * 7rem);
|
|
height: calc(var(--sz) * 7rem);
|
|
outline: none;
|
|
}
|
|
|
|
.XM2 .dpadbutton,
|
|
.XM .dpadbutton {
|
|
background: rgb(28 28 28);
|
|
border: solid rgb(15 15 15) calc(var(--sz) * 0.03rem);
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.XM2 .dpadbutton:active,
|
|
.XM .dpadbutton:active {
|
|
background: rgb(24 24 24);
|
|
border: solid #000 calc(var(--sz) * 0.15rem);
|
|
}
|
|
|
|
.chromecast-remote-body.CC1 .dpadbutton,
|
|
.CC .dpadbutton {
|
|
background: #fff;
|
|
outline: solid #c5c5c5 calc(var(--sz) * 0.0714rem);
|
|
}
|
|
|
|
.chromecast-remote-body.CC2 .dpadbutton,
|
|
.CC2 .dpadbutton {
|
|
background: #cad4d8;
|
|
outline: solid #c5c5c5 calc(var(--sz) * 0.0714rem);
|
|
}
|
|
|
|
.chromecast-remote-body.CC3 .dpadbutton,
|
|
.CC3 .dpadbutton {
|
|
background: #e1d2cc;
|
|
outline: solid #c5c5c5 calc(var(--sz) * 0.0714rem);
|
|
}
|
|
|
|
.AR3 .dpadbutton:nth-child(1)::after,
|
|
.AR1 .dpadbutton:nth-child(1)::after {
|
|
content: "•";
|
|
text-align: center;
|
|
display: block;
|
|
font-weight: 600;
|
|
color: rgb(198, 198, 198);
|
|
padding-right: calc(var(--sz) * 1.2rem);
|
|
padding-bottom: calc(var(--sz) * 1.2rem);
|
|
}
|
|
|
|
.AR3 .dpadbutton:nth-child(2)::after,
|
|
.AR1 .dpadbutton:nth-child(2)::after {
|
|
content: "•";
|
|
text-align: center;
|
|
display: block;
|
|
font-weight: 600;
|
|
color: rgb(198, 198, 198);
|
|
padding-left: calc(var(--sz) * 1.2rem);
|
|
padding-bottom: calc(var(--sz) * 1.2rem);
|
|
}
|
|
|
|
.AR3 .dpadbutton:nth-child(3)::after,
|
|
.AR1 .dpadbutton:nth-child(3)::after {
|
|
content: "•";
|
|
text-align: center;
|
|
display: block;
|
|
font-weight: 600;
|
|
color: rgb(198, 198, 198);
|
|
padding-right: calc(var(--sz) * 1.2rem);
|
|
padding-top: calc(var(--sz) * 1.2rem);
|
|
}
|
|
|
|
.AR3 .dpadbutton:nth-child(4)::after,
|
|
.AR1 .dpadbutton:nth-child(4)::after {
|
|
content: "•";
|
|
text-align: center;
|
|
display: block;
|
|
font-weight: 600;
|
|
color: rgb(198, 198, 198);
|
|
padding-left: calc(var(--sz) * 1.2rem);
|
|
padding-top: calc(var(--sz) * 1.2rem);
|
|
}
|
|
|
|
.dpadbutton:active {
|
|
background: #282828;
|
|
}
|
|
|
|
.chromecast-remote-body .dpadbutton:active,
|
|
.CC .dpadbutton:active {
|
|
background: #efefef;
|
|
}
|
|
|
|
.chromecast-remote-body.CC2 .dpadbutton:active {
|
|
background: #bfcbd0;
|
|
}
|
|
|
|
.chromecast-remote-body.CC3 .dpadbutton:active {
|
|
background: #dbcac3;
|
|
}
|
|
|
|
.dpadbuttonShield {
|
|
width: calc(var(--sz) * 4.101rem);
|
|
height: calc(var(--sz) * 4.101rem);
|
|
}
|
|
|
|
.centerbuttonShield {
|
|
width: calc(var(--sz) * 5rem);
|
|
height: calc(var(--sz) * 5rem);
|
|
margin: 0px;
|
|
padding: 0px;
|
|
place-self: center;
|
|
position: absolute;
|
|
background: rgba(37,37,37,1);
|
|
background: radial-gradient(circle, rgba(28,28,28,1) 0%, rgba(37,37,37,1) 100%);
|
|
}
|
|
|
|
.XM2 .centerbutton,
|
|
.XM .centerbutton {
|
|
background: rgb(28, 28, 28);
|
|
border: solid black calc(var(--sz) * 0.2rem);
|
|
width: calc(var(--sz) * 5rem);
|
|
height: calc(var(--sz) * 5rem);
|
|
margin: 0px;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.chromecast-remote-body .centerbutton,
|
|
.CC .centerbutton {
|
|
background: linear-gradient(rgb(226 226 226) 0%, rgb(255, 255, 255) 70%);
|
|
box-shadow: inset rgb(0 0 0 / 10%) 0 calc(var(--sz) * 0.15rem) calc(var(--sz) * 0.4rem);
|
|
border: solid #dddddd calc(var(--sz) * 0.0714rem);
|
|
width: calc(var(--sz) * 4rem);
|
|
height: calc(var(--sz) * 4rem);
|
|
place-self: center;
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.chromecast-remote-body.CC2 .centerbutton {
|
|
background: linear-gradient(0deg, rgb(208 218 225) 5%, rgb(181 194 199) 100%);
|
|
border: solid #bbc5c9 calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.chromecast-remote-body.CC3 .centerbutton {
|
|
background: linear-gradient(0deg, rgba(245,226,219,1) 0%, rgba(196,180,174,1) 100%);
|
|
border: solid #d9d1d1 calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.apple-remote-body .centerbutton,
|
|
.AR3 .centerbutton {
|
|
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(48,48,48,1) 100%);
|
|
width: calc(var(--sz) * 6rem);
|
|
height: calc(var(--sz) * 6rem);
|
|
margin-left: calc(var(--sz) * 2.65rem);
|
|
margin-top: calc(var(--sz) * 2.65rem);
|
|
box-sizing: border-box;
|
|
transform-origin: center bottom;
|
|
outline: solid #2e2e2e calc(var(--sz) * 0.0714rem);
|
|
}
|
|
|
|
.AR1 .centerbutton {
|
|
background: linear-gradient(180deg, rgb(147, 148, 150) 0%, rgb(207, 211, 213) 100%);
|
|
}
|
|
|
|
.apple-remote-body.AR2 .centerbutton {
|
|
border-radius: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
transform: scale(.75);
|
|
transform-origin: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.apple-remote-body.AR2 .dpadContainer button {
|
|
background: none;
|
|
color: transparent;
|
|
}
|
|
.apple-remote-body.AR2 .dpadContainer button:hover,
|
|
.apple-remote-body.AR2 .dpadContainer button:active {
|
|
color: #636363;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.centerbutton:active {
|
|
transform: scale(95%);
|
|
}
|
|
|
|
.chromecast-remote-body .centerbutton:active,
|
|
.CC .centerbutton:active {
|
|
transform: none;
|
|
box-shadow: inset rgb(0 0 0 / 19%) 0 calc(var(--sz) * 0.25rem) calc(var(--sz) * 0.4375rem) calc(var(--sz) * 0.125rem);
|
|
}
|
|
|
|
|
|
.apple-remote-body .centerbutton:active,
|
|
.AR3 .centerbutton:active {
|
|
transform: none;
|
|
border: calc(var(--sz) * 0.2rem) solid black;
|
|
}
|
|
|
|
.AR3 .centerbutton:active {
|
|
background: linear-gradient(180deg, rgba(0,0,0,1) 15%, rgba(48,48,48,1) 100%);
|
|
}
|
|
|
|
.XM1 .centerbutton:active,
|
|
.XM2 .centerbutton:active,
|
|
.XM .centerbutton:active {
|
|
transform: none;
|
|
border: solid #090909 calc(var(--sz) * 0.24rem);
|
|
background: rgb(26 26 26);
|
|
}
|
|
|
|
.minimal.dpadContainer {
|
|
align-items: center;
|
|
justify-items: center;
|
|
display: grid;
|
|
grid-template-columns: auto calc(var(--sz) * 5rem) auto;
|
|
grid-template-rows: auto calc(var(--sz) * 5rem) auto;
|
|
margin: calc(var(--sz) * 1rem);
|
|
height: calc(var(--sz) * 10.3rem);
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
.minimal .directionButtonContainer {
|
|
border-radius: 30%;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.minimal .dpadbutton {
|
|
background: transparent;
|
|
outline: none;
|
|
display: grid;
|
|
height: 100%;
|
|
width: 100%;
|
|
transform-origin: center center;
|
|
align-self: start;
|
|
justify-items: center;
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.minimal .dpadbutton > svg {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.minimal .dpadbutton:active {
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.minimal .dpadbutton > svg {
|
|
display: inline-block;
|
|
transform: scale(calc(var(--sz) * .55));
|
|
}
|
|
|
|
.minimal .centerbutton {
|
|
border: calc(var(--sz) * 0.175rem) solid rgb(179 179 179);
|
|
background: transparent;
|
|
border-radius: 25%;
|
|
width: calc(var(--sz) * 3rem);
|
|
height: calc(var(--sz) * 3rem);
|
|
margin: 0;
|
|
position: unset;
|
|
}
|
|
|
|
.minimal.dpadContainer #up-button {
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.minimal.dpadContainer #right-button {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.minimal.dpadContainer #down-button {
|
|
align-content: flex-end;
|
|
}
|
|
|
|
.minimal.dpadContainer #left-button {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.remote-button:active {
|
|
box-shadow: inset rgb(0 0 0 / 13%) 0 calc(var(--sz) * 0.2857rem) calc(var(--sz) * 0.1428rem) 0;
|
|
}
|
|
|
|
.remote-button > ha-icon {
|
|
color: #c6c6c6;
|
|
}
|
|
|
|
.remote-button:active > ha-icon, .remote-button:active > .mdiSubstituteIconWrapper {
|
|
color: #bcbcbc;
|
|
transform: scale(calc(var(--sz) * 0.85));
|
|
}
|
|
|
|
.chromecast-remote-body ha-icon {
|
|
color: #686868;
|
|
}
|
|
|
|
.chromecast-remote-body .remote-button:active {
|
|
box-shadow: rgb(0 0 0 / 5%) 0px calc(var(--sz) * 0.125rem) calc(var(--sz) * 0.125rem) calc(var(--sz) * 0.1875rem) inset;
|
|
}
|
|
|
|
.chromecast-remote-body .remote-button:active > ha-icon {
|
|
color: #000;
|
|
}
|
|
|
|
.square {
|
|
border-radius: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.round-top {
|
|
border-radius: 100% 100% 0 0;
|
|
border-bottom: 0;
|
|
box-shadow: none;
|
|
height: calc(var(--sz) * 3.92857rem);
|
|
margin-bottom: calc(var(--sz) * -0.5rem);
|
|
}
|
|
|
|
.round-bottom {
|
|
border-radius: 0 0 100% 100%;
|
|
border-top: 0;
|
|
height: calc(var(--sz) * 3.92857rem);
|
|
margin-top: calc(var(--sz) * -0.5rem);
|
|
}
|
|
|
|
.apple-remote-body .round-bottom, .apple-remote-body.AR2 .round-bottom {
|
|
height: calc(var(--sz) * 5.25rem);
|
|
}
|
|
|
|
.square:active, .round-bottom:active {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.remote-body #volume-up-button, .remote-body #volume-down-button {
|
|
font-size: calc(var(--sz) * 2.5rem);
|
|
}
|
|
.apple-remote-body #volume-up-button, .apple-remote-body #volume-down-button {
|
|
font-size: calc(var(--sz) * 2.25rem);
|
|
}
|
|
.remote-body #programmable-one-button, .remote-body #programmable-two-button {
|
|
font-size: calc(var(--sz) * 1.75rem);
|
|
}
|
|
|
|
.remote-body #volume-up-button:active, .remote-body #volume-down-button:active {
|
|
font-size: calc(var(--sz) * 2rem);
|
|
}
|
|
.apple-remote-body #volume-up-button:active, .apple-remote-body #volume-down-button:active {
|
|
font-size: calc(var(--sz) * 1.75rem);
|
|
}
|
|
.remote-body #programmable-one-button:active, .remote-body #programmable-two-button:active {
|
|
font-size: calc(var(--sz) * 1.45rem);
|
|
}
|
|
|
|
.srcButton {
|
|
height: calc(var(--sz) * 2rem);
|
|
width: calc(var(--sz) * 5.714rem);
|
|
border: solid #090909 calc(var(--sz) * 0.0714rem);
|
|
border-radius: calc(var(--sz) * 2rem);
|
|
display: grid;
|
|
justify-items: center;
|
|
align-content: center;
|
|
color: rgb(198 198 198);
|
|
background: rgb(33 33 33);
|
|
box-shadow: rgb(0 0 0 / 25%) 0 calc(var(--sz) * 0.214rem) calc(var(--sz) * 0.1428rem) 0;
|
|
cursor: pointer;
|
|
line-height: normal;
|
|
user-select: none;
|
|
font-size: calc(var(--sz) * 1.14rem);
|
|
padding: calc(var(--sz) * 0.285rem);
|
|
white-space: nowrap;
|
|
transform: translate3d(0,0,0); /* because ios safari mobile */
|
|
overflow: hidden;
|
|
transition: filter 250ms;
|
|
filter: var(--appButtonFilter);
|
|
}
|
|
|
|
.apple-remote-body .srcButton {
|
|
border: none;
|
|
box-shadow: rgb(0 0 0 / 13%) 0 calc(var(--sz) * 0.214rem) calc(var(--sz) * 0.143rem 0);
|
|
transition: none;
|
|
}
|
|
|
|
.chromecast-remote-body .srcButton {
|
|
filter: grayscale(40%);
|
|
box-shadow: rgb(0 0 0 / 5%) 0 calc(var(--sz) * 0.214rem) calc(var(--sz) * 0.1428rem) 0;
|
|
}
|
|
|
|
.srcButton:active, .srcButton.appActive {
|
|
filter: none;
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.142rem) rgb(255 255 255 / 20%);
|
|
transition: filter 0s;
|
|
}
|
|
|
|
.srcButton.appActiveUnknown {
|
|
filter: grayscale(0%) brightness(100%);
|
|
transition: filter 0s;
|
|
}
|
|
|
|
.shield-remote-body .srcButton {
|
|
height: calc(var(--sz) * 3rem);
|
|
width: calc(var(--sz) * 8rem);
|
|
}
|
|
|
|
.srcButton:active {
|
|
filter: brightness(90%);
|
|
transform: scale(.95);
|
|
box-shadow: none;
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
.chromecast-remote-body .srcButton:active {
|
|
filter: none;
|
|
}
|
|
|
|
.srcButton svg {
|
|
pointer-events: none;
|
|
max-width: calc(var(--sz) * 4.5rem);
|
|
max-height: calc(var(--sz) * 1.6rem);
|
|
}
|
|
|
|
.shield-remote-body .srcButton svg {
|
|
max-height: calc(var(--sz) * 2.1rem);
|
|
max-width: calc(var(--sz) * 6.8rem);
|
|
}
|
|
|
|
.chromecast-remote-body .srcButton svg, .apple-remote-body .srcButton svg {
|
|
max-width: calc(var(--sz) * 3.25rem);
|
|
max-height: calc(var(--sz) * 3.25rem);
|
|
}
|
|
|
|
.apple-remote-body .srcButton svg {
|
|
max-width: calc(var(--sz) * 3.55rem);
|
|
max-height: calc(var(--sz) * 3.55rem);
|
|
}
|
|
|
|
.chromecastBottomIndentedRow {
|
|
display: grid;
|
|
width: calc(100% - (var(--sz) * 1.2rem) - (var(--sz) * 0.4rem * 2));
|
|
padding: calc(var(--sz) * 0.4rem);
|
|
box-sizing: border-box;
|
|
grid-template-columns: auto 1fr auto;
|
|
box-shadow: rgb(0 0 0 / 28%) 0 calc(var(--sz) * 0.12rem) calc(var(--sz) * 0.4rem) inset;
|
|
border-radius: calc(var(--sz) * 5rem);
|
|
grid-column: 1 / 3;
|
|
place-items: center;
|
|
margin-top: calc(var(--sz) * 1rem);
|
|
}
|
|
|
|
.chromecastBottomIndentedRow .remote-button, .chromecastBottomIndentedRow .input-button {
|
|
height: calc(var(--sz) * 2.3rem) !important;
|
|
width: calc(var(--sz) * 2.3rem) !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.chromecastVolumeRocker {
|
|
grid-column: 1 / 3;
|
|
place-items: center;
|
|
width: calc(100% - (var(--sz) * 1.2rem) - (var(--sz) * 0.4rem * 2));
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.chromecastVolumeRocker > button {
|
|
height: calc(var(--sz) * 2rem) !important;
|
|
width: 100% !important;
|
|
box-shadow: rgb(0 0 0 / 5%) 0 calc(var(--sz) * 0.214rem) calc(var(--sz) * 0.1428rem) 0;
|
|
}
|
|
|
|
.chromecastVolumeRocker #volume-down-button {
|
|
border-radius: calc(var(--sz) * 2rem) 0 0 calc(var(--sz) * 2rem);
|
|
border-right: calc(var(--sz) * 0.05rem) solid #ebebeb;
|
|
}
|
|
|
|
.chromecastVolumeRocker #volume-up-button {
|
|
border-radius: 0% calc(var(--sz) * 2rem) calc(var(--sz) * 2rem) 0;
|
|
border-left: 0;
|
|
}
|
|
|
|
.digit-pad-button {
|
|
font-size: calc(var(--sz) * 1rem);
|
|
font-weight: 600;
|
|
height: calc(var(--sz) * 2rem);
|
|
border-radius: calc(var(--sz) * 1em);
|
|
}
|
|
|
|
.digit-pad-button:active {
|
|
font-size: calc(var(--sz) * 0.9rem);
|
|
}
|
|
|
|
.deviceNameTop {
|
|
white-space: nowrap;
|
|
font-size: calc(var(--sz) * 1rem);
|
|
overflow: hidden;
|
|
color: var(--devicenamecolor);
|
|
margin-left: -1rem;
|
|
text-align: center;
|
|
display: grid;
|
|
height: calc(var(--sz) * 2rem);
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
.AF6 .deviceNameTop,
|
|
.AFJTV .deviceNameTop,
|
|
.AFXF2 .deviceNameTop{
|
|
grid-column: 1 / 4;
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.AL1 .deviceNameTop, .AL2 .deviceNameTop {
|
|
margin: 0rem 0px calc(var(--sz) * 1.25rem);
|
|
display: block;
|
|
height: unset;
|
|
overflow: unset;
|
|
font-size: calc(var(--sz) * 1.25rem);
|
|
}
|
|
|
|
.roku-remote-body .deviceNameTop {
|
|
margin-left: 0;
|
|
height: auto;
|
|
}
|
|
|
|
.roku-remote-body.RSR .deviceNameTop {
|
|
position: absolute;
|
|
}
|
|
|
|
.shield-remote-body .deviceNameTop {
|
|
display: unset;
|
|
align-items: unset;
|
|
align-content: unset;
|
|
justify-items: unset;
|
|
margin-left: 0;
|
|
margin-top: -1rem;
|
|
}
|
|
|
|
.shield-remote-body.ns1-body .deviceNameTop {
|
|
margin-top: 0rem;
|
|
margin-bottom: -0.75rem;
|
|
}
|
|
|
|
.XM2 .deviceNameTop {
|
|
grid-column: 1 / 4;
|
|
margin: calc(var(--sz) * -1rem) 0 0;
|
|
}
|
|
|
|
.chromecast-remote-body .deviceNameTop {
|
|
grid-column: 1 / 3;
|
|
margin: unset;
|
|
margin-top: calc(var(--sz) * 1rem);
|
|
height: unset;
|
|
display: block;
|
|
}
|
|
|
|
.apple-remote-body .deviceNameTop {
|
|
grid-column: 1 / 3;
|
|
margin: 0 0 calc(var(--sz) * -1.8rem) 0;
|
|
}
|
|
|
|
.apple-remote-body.AR1 .deviceNameTop {
|
|
margin: calc(var(--sz) * -4rem) 0 calc(var(--sz) * -2.5rem) 0;
|
|
}
|
|
|
|
.deviceNameBottom {
|
|
grid-column: 1/4;
|
|
color: var(--devicenamecolor);
|
|
font-size: calc(var(--sz) * 1.25rem);
|
|
margin-bottom: calc(var(--sz) * -2.5rem);
|
|
margin-top: calc(var(--sz) * .5rem);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
text-align: center;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.AF6 .deviceNameBottom {
|
|
margin-bottom: calc(var(--sz) * -1rem);
|
|
}
|
|
|
|
.AL1 .deviceNameBottom, .AL2 .deviceNameBottom {
|
|
margin-bottom: unset;
|
|
margin-top: calc(var(--sz) * 1.8rem);
|
|
overflow: unset;
|
|
}
|
|
|
|
.apple-remote-body .deviceNameBottom {
|
|
grid-column: 1 / 3;
|
|
margin-bottom: calc(var(--sz) * -1.25rem);
|
|
}
|
|
|
|
.shield-remote-body .deviceNameBottom {
|
|
grid-column: 1 / 3;
|
|
font-size: calc(var(--sz) * 1rem);
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
position: absolute;
|
|
bottom: calc(var(--sz) * 0.3rem);
|
|
}
|
|
|
|
.chromecast-remote-body .deviceNameBottom {
|
|
grid-column: 1 / 3;
|
|
margin-right: unset;
|
|
margin-bottom: calc(var(--sz) * 1rem);
|
|
margin-left: unset;
|
|
margin-top: calc(var(--sz) * 0.5rem);
|
|
height: unset;
|
|
display: block;
|
|
}
|
|
|
|
.roku-remote-body.RTR .deviceNameBottom {
|
|
margin-bottom: calc(var(--sz) * 0.1rem);
|
|
margin-top: calc(var(--sz) * -1.25rem);
|
|
}
|
|
|
|
.roku-remote-body.RWR .deviceNameBottom,
|
|
.roku-remote-body.RHR .deviceNameBottom {
|
|
position: absolute;
|
|
width: calc(var(--sz) * 11.45rem);
|
|
bottom: calc(var(--sz) * 3.5rem);
|
|
}
|
|
|
|
.firemoteVersionNumber {
|
|
text-shadow: 0px 1px 0px #1e1e1e, 0px -1px 0px #000;
|
|
color: #4e4e4e;
|
|
align-self: right;
|
|
text-align: right;
|
|
width: 100%;
|
|
justify-self: right;
|
|
display: block !important;
|
|
font-size: calc(var(--sz) * .9rem);
|
|
position: absolute;
|
|
bottom: calc(var(--sz) * .35rem);
|
|
right: calc(var(--sz) * .4rem);
|
|
}
|
|
|
|
.customLauncherBackground {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
transform: scale(1.25);
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.customLauncherTxt {
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.customLauncherIcon {
|
|
display: flex;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
transform: scale(var(--sz));
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.customLauncherImg {
|
|
pointer-events: none;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
overflow: hidden;
|
|
z-index: 2;
|
|
}
|
|
|
|
.AFJTV #tv-button,
|
|
.AFXF2 #tv-button{
|
|
font-size: calc(var(--sz) * 0.8rem);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.colorButtons {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin: calc(var(--sz) * 0.5rem) 0 calc(var(--sz) * 4.5rem) 0;;
|
|
}
|
|
|
|
.AFJTV div.colorButtons button,
|
|
.AFXF2 div.colorButtons button{
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
height: calc(var(--sz) * 2.3rem);
|
|
width: calc(var(--sz) * 2.3rem);
|
|
}
|
|
|
|
.AFJTV div.colorButtons button svg,
|
|
.AFXF2 div.colorButtons button svg {
|
|
height: calc(var(--sz) * 1.1rem);
|
|
width: calc(var(--sz) * 1.1rem);
|
|
filter: brightness(0.8) saturate(0.8);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.AFJTV div.colorButtons button:active svg,
|
|
.AFXF2 div.colorButtons button:active svg{
|
|
filter: none;
|
|
transform: scale(0.85)
|
|
}
|
|
|
|
.AFJTV .jvcbrandlogo {
|
|
height: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: calc(var(--sz) * -2rem);
|
|
}
|
|
|
|
.AFJTV .jvcbrandlogo svg {
|
|
width: calc(var(--sz) * 5rem);
|
|
height: auto;
|
|
}
|
|
|
|
.AFXF2 .xf2brandlogo {
|
|
height: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: calc(var(--sz) * -1.5rem);
|
|
}
|
|
|
|
.AFXF2 .xf2brandlogo svg {
|
|
width: calc(var(--sz) * 7rem);
|
|
height: auto;
|
|
}
|
|
|
|
/* Homatics styles */
|
|
.homatics-remote-body {
|
|
align-content: start;
|
|
grid-row-gap: calc(var(--sz)* 1rem);
|
|
background: #ebebea;
|
|
border-color: #dcdcdc;
|
|
border-radius: calc(var(--sz)* 2.8rem);
|
|
min-height: calc(var(--sz)* 48.5rem);
|
|
padding: calc(var(--sz) * 1.1rem) calc(var(--sz) * 0.714rem) calc(var(--sz) * 2.143rem) calc(var(--sz) * 0.714rem);
|
|
box-shadow: 0 calc(var(--sz) * 0.214rem) calc(var(--sz) * 0.214rem) rgb(0 0 0 / 10%);
|
|
}
|
|
|
|
.homatics-remote-body.HO2,
|
|
.homatics-remote-body.HO4 {
|
|
background: #252525;
|
|
border-color: #2f2f2f;
|
|
}
|
|
|
|
.HO1 .remote-button,
|
|
.HO3 .remote-button {
|
|
background: #fff;
|
|
color: rgb(106, 106, 106);
|
|
border: solid rgb(186 186 186) calc(var(--sz)* 0.0714rem);
|
|
box-shadow: rgb(0 0 0 / 15%) 0px calc(var(--sz)* 0.063rem) calc(var(--sz)* 0.188rem);
|
|
}
|
|
|
|
.HO2 .remote-button,
|
|
.HO4 .remote-button {
|
|
background: #2f2f2f;
|
|
border: solid rgb(15 15 15) calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.homatics-remote-body .remote-button:active {
|
|
box-shadow: inset rgb(0 0 0 / 42%) 0px calc(var(--sz)* 0.1rem) calc(var(--sz)* 0.188rem);
|
|
filter: brightness(0.94);
|
|
border: solid rgb(232 232 232) calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.HO2 .remote-button:active,
|
|
.HO4 .remote-button:active {
|
|
border: solid rgb(10 10 10) calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.HO2 .litbutton,
|
|
.HO4 .litbutton {
|
|
box-shadow: 0 0 calc(var(--sz)* 0.857rem) calc(var(--sz)* 0.0714rem) rgb(171 253 255 / 15%);
|
|
}
|
|
|
|
.HO1 .litbutton > ha-icon,
|
|
.HO3 .litbutton > ha-icon {
|
|
color: #00979b !important;
|
|
}
|
|
|
|
.HO2 .litbutton > ha-icon,
|
|
.HO4 .litbutton > ha-icon {
|
|
color: #abfdff !important
|
|
}
|
|
|
|
.homatics-remote-body .deviceNameTop {
|
|
grid-column: 1 / 4;
|
|
margin: unset;
|
|
height: unset;
|
|
display: block;
|
|
margin-bottom: calc(var(--sz) * -1rem);
|
|
}
|
|
|
|
.HO1 #home-button.litbutton > ha-icon, .HO3 #home-button.litbutton > ha-icon {
|
|
color: #03585b !important
|
|
}
|
|
|
|
.HO2 #home-button.litbutton > ha-icon, .HO4 #home-button.litbutton > ha-icon {
|
|
color: #45989a !important
|
|
}
|
|
|
|
.homatics-remote-body .micHole {
|
|
background: black;
|
|
border-radius: 100%;
|
|
height: calc(var(--sz)* 0.3rem);
|
|
aspect-ratio: 1 / 1;
|
|
align-self: end;
|
|
justify-self: center;
|
|
}
|
|
|
|
.homatics-remote-body #power-button, .homatics-remote-body #input-button {
|
|
height: calc(var(--sz)* 2.75rem);
|
|
width: calc(var(--sz)* 2.75rem);
|
|
}
|
|
|
|
.remote-body.HO1 .remote-button > ha-icon,
|
|
.remote-body.HO3 .remote-button > ha-icon {
|
|
color: rgb(106 106 106);
|
|
}
|
|
|
|
.remote-body.HO2 .remote-button > ha-icon {
|
|
color: rgb(245 245 245);
|
|
}
|
|
|
|
.homatics-remote-body .remote-button.dark {
|
|
background: linear-gradient(180deg, rgb(168 168 168) 26%, rgb(144 144 144) 50%, rgb(128 128 128) 75%);
|
|
}
|
|
|
|
.homatics-remote-body.HO2 .remote-button.dark,
|
|
.homatics-remote-body.HO4 .remote-button.dark {
|
|
background: linear-gradient(180deg, rgb(255 255 255) 26%, rgb(221 221 221) 50%, rgb(211 211 211) 75%);
|
|
}
|
|
|
|
.homatics-remote-body .remote-button.dark > ha-icon {
|
|
color: #000;
|
|
}
|
|
|
|
.homatics-remote-body.HO2 .remote-button.dark > ha-icon,
|
|
.homatics-remote-body.HO4 .remote-button.dark > ha-icon {
|
|
color: #4b4b4b;
|
|
}
|
|
|
|
.remote-body.HO2 .remote-button.light > ha-icon {
|
|
color: #464646;
|
|
}
|
|
|
|
.homatics-remote-body .micNLight {
|
|
display: grid;
|
|
align-content: space-between;
|
|
padding: calc(var(--sz) * 0.25rem) 0;
|
|
}
|
|
|
|
.homatics-remote-body .activityLight {
|
|
background: #ff0000;
|
|
box-shadow: #ff0000 0 0 calc(var(--sz)* 0.6rem) calc(var(--sz)* 0.05rem);
|
|
border-radius: 100%;
|
|
height: calc(var(--sz)* 0.4rem);
|
|
aspect-ratio: 1 / 1;
|
|
opacity: 0;
|
|
}
|
|
|
|
.homatics-remote-body.HO2 .activityLight,
|
|
.homatics-remote-body.HO4 .activityLight {
|
|
background: #adff87;
|
|
box-shadow: lime 0 0 calc(var(--sz)* 0.6rem) calc(var(--sz)* 0.05rem);
|
|
}
|
|
|
|
.homatics-remote-body .digit-pad-button {
|
|
font-size: calc(var(--sz)* 1rem);
|
|
font-weight: 600;
|
|
height: calc(var(--sz)* 2.75rem);
|
|
width: calc(var(--sz)* 2.75rem);
|
|
border-radius: 100%;
|
|
margin-bottom: calc(var(--sz)* -0.6rem);
|
|
}
|
|
|
|
.homatics-remote-body .colorButtons {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin: calc(var(--sz) * 0.5rem) 0 0 0;
|
|
}
|
|
|
|
.homatics-remote-body div.colorButtons button {
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
height: calc(var(--sz) * 2.3rem);
|
|
width: calc(var(--sz) * 2.3rem);
|
|
}
|
|
|
|
.homatics-remote-body div.colorButtons button svg{
|
|
height: calc(var(--sz) * 1.1rem);
|
|
width: calc(var(--sz) * 1.1rem);
|
|
filter: brightness(0.8) saturate(0.8);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.homatics-remote-body div.colorButtons button:active svg{
|
|
filter: none;
|
|
transform: scale(0.85)
|
|
}
|
|
|
|
|
|
.homatics-remote-body #bookmark-button, .homatics-remote-body #settings-button {
|
|
align-self: end;
|
|
}
|
|
|
|
.homatics-remote-body #keyboard-button {
|
|
height: calc(var(--sz)* 3.572rem);
|
|
width: calc(var(--sz)* 3.572rem);
|
|
margin-bottom: calc(var(--sz)* 1.1rem);
|
|
}
|
|
|
|
.homatics-remote-body .directionButtonContainer {
|
|
box-shadow: rgb(0 0 0 / 15%) calc(var(--sz)* 0.025rem) calc(var(--sz)* 0.025rem) calc(var(--sz)* 0.025rem)
|
|
background: #cacaca;
|
|
border: calc(var(--sz)* 0.0714rem) solid #cacaca;
|
|
}
|
|
|
|
.homatics-remote-body .directionButtonContainer:has(#down-button:active) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.homatics-remote-body .dpadContainer {
|
|
align-items: center;
|
|
justify-items: center;
|
|
position: relative;
|
|
margin-top: calc(var(--sz)* -1.5rem);
|
|
margin-bottom: calc(var(--sz)* -1.5rem);
|
|
isolation: isolate;
|
|
}
|
|
|
|
.homatics-remote-body .dpadbutton, .homatics-remote-body .dpadbutton:active {
|
|
all: unset;
|
|
cursor: pointer;
|
|
width: calc(var(--sz)* 5.5714rem);
|
|
height: calc(var(--sz)* 5.5714rem);
|
|
outline: solid #a6a6a6 calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.homatics-remote-body .dpadbutton {
|
|
background: #adadad;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.HO2 .dpadbutton,
|
|
.HO4 .dpadbutton {
|
|
background: rgb(216 216 216);
|
|
outline: solid rgb(200 200 200) calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.homatics-remote-body .dpadbutton:active {
|
|
background: rgb(153 153 153);
|
|
box-shadow: inset #4f4f4f 0 0 calc(var(--sz)* 0.35rem) 0px;
|
|
transform: none;
|
|
filter: none;
|
|
overflow: hidden;
|
|
backdrop-filter: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.HO2 .dpadbutton:active,
|
|
.HO4 .dpadbutton:active {
|
|
background: rgb(200 200 200);
|
|
box-shadow: none;
|
|
outline: solid #989898 calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.homatics-remote-body .centerbutton {
|
|
background: linear-gradient(180deg, #c8c8c8 0%, rgba(255, 255, 255, 1) 100%);
|
|
border: solid #a1a1a1 calc(var(--sz)* 0.25rem);
|
|
width: calc(var(--sz)* 5.13rem);
|
|
height: calc(var(--sz)* 5.13rem);
|
|
margin: 0px;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.HO2 .centerbutton,
|
|
.HO4 .centerbutton {
|
|
background: linear-gradient(0deg, rgb(48 48 48) 26%, rgb(39 39 39) 50%, rgb(33 33 33) 75%);
|
|
border: solid #252525 calc(var(--sz)* 0.25rem);
|
|
}
|
|
|
|
.homatics-remote-body .centerbutton:active {
|
|
transform: none;
|
|
filter: brightness(0.92);
|
|
border: solid #b3b3b3 calc(var(--sz)* 0.29rem);
|
|
}
|
|
|
|
.HO2 .centerbutton:active,
|
|
.HO4 .centerbutton:active {
|
|
filter: brightness(0.8);
|
|
border: solid #000 calc(var(--sz)* 0.29rem);
|
|
}
|
|
|
|
.homatics-remote-body #home-button {
|
|
align-self: end;
|
|
margin-top: calc(var(--sz)* 1.1rem);
|
|
z-index: 10; /* Required for companion app to prevent accidental push of down button */
|
|
}
|
|
|
|
.homatics-remote-body .volumeChannelSection {
|
|
grid-column-start: 1;
|
|
grid-column-end: 4;
|
|
display: grid;
|
|
grid-template-columns: 33% 1fr 33%;
|
|
grid-template-areas: "vol-up mute ch-up"
|
|
"vol-down mute ch-down";
|
|
grid-row-gap: 0;
|
|
width: 100%;
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.homatics-remote-body #volume-up-button-container {
|
|
grid-area: vol-up;
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
font-size: calc(var(--sz)* 2rem);
|
|
}
|
|
|
|
.homatics-remote-body #volume-up-button-container ha-icon,
|
|
.homatics-remote-body #channel-up-button-container ha-icon {
|
|
margin-top: calc(var(--sz)* -1rem);
|
|
}
|
|
|
|
.homatics-remote-body #voltext,
|
|
.homatics-remote-body #chtext {
|
|
max-width: calc(var(--sz)* 1.5rem);
|
|
max-height: calc(var(--sz)* 1rem);
|
|
position: absolute;
|
|
padding-left: calc(var(--sz)* 1.0rem);
|
|
pointer-events: none;
|
|
margin-top: calc(var(--sz)* -0.5rem);
|
|
}
|
|
|
|
.homatics-remote-body #voltext > * {
|
|
fill: rgb(106 106 106);
|
|
}
|
|
|
|
.homatics-remote-body.HO2 #voltext > *,
|
|
.homatics-remote-body.HO4 #voltext > * {
|
|
fill: rgb(245, 245, 245);
|
|
}
|
|
|
|
.homatics-remote-body #chtext {
|
|
max-width: calc(var(--sz)* 1rem);
|
|
padding-left: calc(var(--sz)* 1.25rem);
|
|
}
|
|
|
|
.homatics-remote-body #chtext > * {
|
|
fill: rgb(106 106 106);
|
|
}
|
|
|
|
.homatics-remote-body.HO2 #chtext > *,
|
|
.homatics-remote-body.HO4 #chtext > * {
|
|
fill: rgb(245, 245, 245);
|
|
}
|
|
|
|
.homatics-remote-body #channel-up-button-container {
|
|
grid-area: ch-up;
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.homatics-remote-body #mute-button {
|
|
grid-area: mute;
|
|
height: calc(var(--sz)* 2.6rem);
|
|
width: calc(var(--sz)* 2.6rem);
|
|
}
|
|
|
|
#soundeqtext {
|
|
grid-area: mute;
|
|
max-width: calc(var(--sz)* 3.5rem);
|
|
max-height: calc(var(--sz)* 0.7rem);
|
|
margin-top: calc(var(--sz)* 4.1rem);
|
|
fill: rgb(106 106 106);
|
|
}
|
|
|
|
.HO2 #soundeqtext, .HO4 #soundeqtext {
|
|
fill: rgb(245, 245, 245);
|
|
}
|
|
|
|
.homatics-remote-body #volume-down-button {
|
|
grid-area: vol-down;
|
|
border-top: 0;
|
|
font-size: calc(var(--sz)* 2rem);
|
|
}
|
|
|
|
.homatics-remote-body #volume-down-button ha-icon,
|
|
.homatics-remote-body #channel-down-button ha-icon {
|
|
margin-bottom: calc(var(--sz)* -1rem);
|
|
}
|
|
|
|
.homatics-remote-body #channel-down-button {
|
|
grid-area: ch-down;
|
|
border-top: 0;
|
|
}
|
|
|
|
.homatics-remote-body #volume-down-button,
|
|
.homatics-remote-body #channel-down-button {
|
|
box-shadow: rgb(0 0 0 / 15%) 0px calc(var(--sz)* 0.063rem) calc(var(--sz)* 0.1rem);
|
|
}
|
|
|
|
.homatics-remote-body #volume-up-button,
|
|
.homatics-remote-body #channel-up-button {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.homatics-remote-body #volume-up-button:active,
|
|
.homatics-remote-body #channel-up-button:active {
|
|
filter: none;
|
|
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 95%);
|
|
border: solid rgb(186 186 186) calc(var(--sz)* 0.0714rem);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.homatics-remote-body.HO2 #volume-up-button:active,
|
|
.homatics-remote-body.HO2 #channel-up-button:active,
|
|
.homatics-remote-body.HO4 #volume-up-button:active,
|
|
.homatics-remote-body.HO4 #channel-up-button:active {
|
|
filter: none;
|
|
background: linear-gradient(0deg, rgb(46 46 46) 0%, rgb(38 38 38) 95%);
|
|
border: solid rgb(0 0 0) calc(var(--sz)* 0.08rem);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.homatics-remote-body #volume-down-button:active,
|
|
.homatics-remote-body #channel-down-button:active {
|
|
filter: none;
|
|
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 95%);
|
|
box-shadow: none;
|
|
border: solid rgb(186 186 186) calc(var(--sz)* 0.0714rem);
|
|
border-top: 0;
|
|
}
|
|
|
|
.homatics-remote-body.HO2 #volume-down-button:active,
|
|
.homatics-remote-body.HO2 #channel-down-button:active,
|
|
.homatics-remote-body.HO4 #volume-down-button:active,
|
|
.homatics-remote-body.HO4 #channel-down-button:active {
|
|
filter: none;
|
|
background: linear-gradient(180deg, rgb(46 46 46) 0%, rgb(38 38 38) 95%);
|
|
box-shadow: none;
|
|
border: solid rgb(0 0 0) calc(var(--sz)* 0.08rem);
|
|
border-top: 0;
|
|
}
|
|
|
|
.homatics-remote-body .afappsgrid {
|
|
margin-bottom: calc(var(--sz)* 7rem);
|
|
}
|
|
|
|
.homatics-remote-body .srcButton {
|
|
border: solid #a7a7a7 calc(var(--sz) * 0.0714rem);
|
|
}
|
|
|
|
.homaticsLogo {
|
|
position: absolute;
|
|
bottom: calc(var(--sz)* 3rem);
|
|
width: calc(var(--sz)* 12.286rem);
|
|
text-align: center;
|
|
}
|
|
|
|
.homaticsLogo svg {
|
|
max-width: calc(var(--sz)* 6.5rem);
|
|
max-height: calc(var(--sz)* 3.2rem);
|
|
stroke: rgb(161 161 161);
|
|
}
|
|
|
|
.HO2 .homaticsLogo svg,
|
|
.HO4 .homaticsLogo svg {
|
|
stroke: #000;
|
|
}
|
|
|
|
.homatics-remote-body .deviceNameBottom {
|
|
position: absolute;
|
|
bottom: calc(var(--sz)* 3.5rem);
|
|
width: calc(var(--sz)* 12.286rem);
|
|
text-align: center;
|
|
}
|
|
|
|
.homatics-remote-body .srcButton {
|
|
border-color: rgb(255 255 255 / 0%);
|
|
}
|
|
|
|
.homatics-remote-body .srcButton.appActive {
|
|
box-shadow: rgb(0 0 0 / 13%) 0 calc(var(--sz)* 0.214rem) calc(var(--sz)* 0.1428rem) 0, white 0 0 calc(var(--sz)* 0.857rem) calc(var(--sz)* 0.429rem);
|
|
border-color: #e6e6e6;
|
|
animation-name: homatics_flash_border;
|
|
animation-duration: 2s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.HO2 .srcButton.appActive, .HO4 .srcButton.appActive {
|
|
box-shadow: rgb(255 255 255 / 0%) 0 calc(var(--sz)* 0.214rem) calc(var(--sz)* 0.1428rem) 0, rgb(255 255 255 / 31%) 0 0 calc(var(--sz)* 0.857rem) calc(var(--sz)* 0.429rem);
|
|
}
|
|
|
|
@keyframes homatics_flash_border {
|
|
0% {
|
|
border-color: rgb(0 0 0 / 16%);
|
|
}
|
|
50% {
|
|
border-color: #fff;
|
|
}
|
|
100% {
|
|
border-color: rgb(0 0 0 / 16%);
|
|
}
|
|
}
|
|
|
|
/* end Homatics styles */
|
|
|
|
|
|
/* onn. styles */
|
|
.remote-body.ON1, .remote-body.ON2 {
|
|
align-content: start;
|
|
grid-row-gap: calc(var(--sz)* 1rem);
|
|
background: #ebebea;
|
|
border-color: #dcdcdc;
|
|
border-radius: calc(var(--sz)* 2.8rem);
|
|
min-height: calc(var(--sz)* 48.5rem);
|
|
padding: calc(var(--sz) * 1.1rem) calc(var(--sz) * 0.714rem) calc(var(--sz) * 2.143rem) calc(var(--sz) * 0.714rem);
|
|
box-shadow: 0 calc(var(--sz) * 0.214rem) calc(var(--sz) * 0.214rem) rgb(0 0 0 / 10%);
|
|
}
|
|
|
|
.remote-body.ON2 {
|
|
background: #252525;
|
|
border-color: #2f2f2f;
|
|
}
|
|
|
|
.ON1 .remote-button, .ON2 .remote-button {
|
|
background: #fff;
|
|
color: rgb(106, 106, 106);
|
|
border: solid rgb(186 186 186) calc(var(--sz)* 0.0714rem);
|
|
box-shadow: rgb(0 0 0 / 15%) 0px calc(var(--sz)* 0.063rem) calc(var(--sz)* 0.188rem);
|
|
}
|
|
|
|
.ON2 .remote-button {
|
|
background: #2f2f2f;
|
|
border: solid rgb(15 15 15) calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.ON1 .remote-button:active, .ON2 .remote-button:active {
|
|
box-shadow: inset rgb(0 0 0 / 42%) 0px calc(var(--sz)* 0.1rem) calc(var(--sz)* 0.188rem);
|
|
filter: brightness(0.94);
|
|
border: solid rgb(232 232 232) calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.ON2 .remote-button:active {
|
|
border: solid rgb(10 10 10) calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.remote-body.ON1 .remote-button.litbutton {
|
|
background: #ffffe7;
|
|
}
|
|
|
|
.remote-body.ON1 #power-button.litbutton > ha-icon,
|
|
.remote-body.ON2 .remote-button.litbutton > ha-icon {
|
|
color: #017374 !important;
|
|
}
|
|
|
|
.remote-body.ON2 #power-button.litbutton > ha-icon {
|
|
color: #ebef66 !important;
|
|
}
|
|
|
|
.remote-body.ON1 .remote-button:active > ha-icon,
|
|
.remote-body.ON2 .remote-button:active > ha-icon {
|
|
transform: scale(calc(var(--sz)* 0.90));
|
|
}
|
|
|
|
.remote-body.ON1 .remote-button.dark,
|
|
.remote-body.ON2 .remote-button.dark {
|
|
background: linear-gradient(180deg, rgba(69,69,69,1) 26%, rgba(55,55,55,1) 50%, rgba(45,45,45,1) 75%);
|
|
}
|
|
|
|
.remote-body.ON2 .remote-button.light {
|
|
background: linear-gradient(0deg, #c8c8c8 0%, rgba(255, 255, 255, 1) 100%);
|
|
}
|
|
|
|
.remote-body.ON1 .remote-button > ha-icon {
|
|
color: rgb(106 106 106);
|
|
}
|
|
|
|
.remote-body.ON2 .remote-button > ha-icon {
|
|
color: rgb(245 245 245);
|
|
}
|
|
|
|
.remote-body.ON1 .remote-button.dark > ha-icon {
|
|
color: #ebebea;
|
|
}
|
|
|
|
.remote-body.ON2 .remote-button.light > ha-icon {
|
|
color: #464646;
|
|
}
|
|
|
|
.remote-body.ON1 .remote-button.dark.litbutton {
|
|
background: #004040;
|
|
}
|
|
|
|
.remote-body.ON1 .remote-button.litbutton > ha-icon,
|
|
.remote-body.ON1 .remote-button.dark.litbutton > ha-icon,
|
|
.remote-body.ON2 .remote-button.dark.litbutton > ha-icon {
|
|
color: #ffffab;
|
|
}
|
|
|
|
.ON1 .directionButtonContainer, .ON2 .directionButtonContainer {
|
|
box-shadow: rgb(0 0 0 / 73%) calc(var(--sz)* 0.025rem) calc(var(--sz)* 0.025rem) calc(var(--sz)* 0.025rem);
|
|
background: black;
|
|
}
|
|
|
|
.ON1 .directionButtonContainer:has(#down-button:active), .ON2 .directionButtonContainer:has(#down-button:active) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ON1 .dpadContainer, .ON2 .dpadContainer {
|
|
align-items: center;
|
|
justify-items: center;
|
|
position: relative;
|
|
margin-top: calc(var(--sz)* -1.5rem);
|
|
margin-bottom: calc(var(--sz)* -1.5rem);
|
|
isolation: isolate;
|
|
}
|
|
|
|
.ON1 .dpadbutton, .ON1 .dpadbutton:active,
|
|
.ON2 .dpadbutton, .ON2 .dpadbutton:active {
|
|
all: unset;
|
|
cursor: pointer;
|
|
width: calc(var(--sz)* 5.5714rem);
|
|
height: calc(var(--sz)* 5.5714rem);
|
|
outline: solid #2e2e2e calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.ON1 .dpadbutton, .ON2 .dpadbutton {
|
|
background: rgba(55, 55, 55, 1);
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.ON2 .dpadbutton {
|
|
background: rgb(216 216 216);
|
|
outline: solid rgb(200 200 200) calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.ON1 .dpadbutton:active, .ON2 .dpadbutton:active {
|
|
background: rgba(45, 45, 45, 1);
|
|
box-shadow: inset #161616 0 0 calc(var(--sz)* 0.35rem) 0px;
|
|
transform: none;
|
|
filter: none;
|
|
overflow: hidden;
|
|
backdrop-filter: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.ON2 .dpadbutton:active {
|
|
background: rgb(200 200 200);
|
|
box-shadow: none;
|
|
outline: solid #989898 calc(var(--sz)* 0.0714rem);
|
|
}
|
|
|
|
.ON1 .centerbutton, .ON2 .centerbutton {
|
|
background: linear-gradient(180deg, #c8c8c8 0%, rgba(255, 255, 255, 1) 100%);
|
|
border: solid #2b2b2b calc(var(--sz)* 0.25rem);
|
|
width: calc(var(--sz)* 5.13rem);
|
|
height: calc(var(--sz)* 5.13rem);
|
|
margin: 0px;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.ON2 .centerbutton {
|
|
background: linear-gradient(0deg, rgb(48 48 48) 26%, rgb(39 39 39) 50%, rgb(33 33 33) 75%);
|
|
}
|
|
|
|
.ON1 .centerbutton:active, .ON2 .centerbutton:active {
|
|
transform: none;
|
|
filter: brightness(0.92);
|
|
border: solid #2b2b2b calc(var(--sz)* 0.29rem);
|
|
}
|
|
|
|
.ON2 .centerbutton:active {
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
.ON1 #power-button, .ON1 #input-button,
|
|
.ON2 #power-button, .ON2 #magic-star-button {
|
|
height: calc(var(--sz)* 2.5rem);
|
|
width: calc(var(--sz)* 2.5rem);
|
|
}
|
|
|
|
.ON1 #power-button, .ON2 #power-button {
|
|
justify-self: left;
|
|
}
|
|
|
|
.ON1 .micNLight, .ON2 .micNLight {
|
|
display: grid;
|
|
align-content: space-between;
|
|
padding: calc(var(--sz) * 0.25rem) 0;
|
|
}
|
|
|
|
.ON1 .activityLight, .ON2 .activityLight {
|
|
background: #adff87;
|
|
box-shadow: lime 0 0 calc(var(--sz)* 0.6rem) calc(var(--sz)* 0.05rem);
|
|
border-radius: 100%;
|
|
height: calc(var(--sz)* 0.4rem);
|
|
aspect-ratio: 1 / 1;
|
|
opacity: 0;
|
|
}
|
|
|
|
.ON1 .micHole, .ON2 .micHole {
|
|
background: black;
|
|
border-radius: 100%;
|
|
height: calc(var(--sz)* 0.3rem);
|
|
aspect-ratio: 1 / 1;
|
|
align-self: end;
|
|
justify-self: center;
|
|
}
|
|
|
|
.ON1 #input-button, .ON2 #magic-star-button {
|
|
justify-self: right;
|
|
}
|
|
|
|
.ON1 #profile-button, .ON1 #settings-button,
|
|
.ON2 #profile-button, .ON2 #settings-button {
|
|
align-self: end;
|
|
}
|
|
|
|
.ON1 #keyboard-button, .ON2 #keyboard-button {
|
|
height: calc(var(--sz)* 3.572rem);
|
|
width: calc(var(--sz)* 3.572rem);
|
|
margin-bottom: calc(var(--sz)* 1.1rem);
|
|
}
|
|
|
|
.ON1 #home-button, .ON2 #home-button {
|
|
align-self: end;
|
|
margin-top: calc(var(--sz)* 1.1rem);
|
|
z-index: 10; /* Required for companion app to prevent accidental push of down button */
|
|
}
|
|
|
|
.ON1 .volumeChannelSection, .ON2 .volumeChannelSection {
|
|
grid-column-start: 1;
|
|
grid-column-end: 4;
|
|
display: grid;
|
|
grid-template-columns: 33% 1fr 33%;
|
|
grid-template-areas: "vol-up mute ch-up"
|
|
"vol-down mute ch-down";
|
|
grid-row-gap: 0;
|
|
width: 100%;
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.ON1 #volume-up-button, .ON2 #volume-up-button {
|
|
grid-area: vol-up;
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
font-size: calc(var(--sz)* 2rem);
|
|
}
|
|
|
|
.ON1 #channel-up-button, .ON2 #channel-up-button {
|
|
grid-area: ch-up;
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.ON1 #mute-button, .ON2 #mute-button {
|
|
grid-area: mute;
|
|
height: calc(var(--sz)* 2.6rem);
|
|
width: calc(var(--sz)* 2.6rem);
|
|
}
|
|
|
|
.ON1 #volume-down-button, .ON2 #volume-down-button {
|
|
grid-area: vol-down;
|
|
border-top: 0;
|
|
font-size: calc(var(--sz)* 2rem);
|
|
}
|
|
|
|
.ON1 #channel-down-button, .ON2 #channel-down-button {
|
|
grid-area: ch-down;
|
|
border-top: 0;
|
|
}
|
|
|
|
.ON1 #volume-up-button:active, .ON1 #channel-up-button:active {
|
|
filter: none;
|
|
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 95%);
|
|
border: solid rgb(186 186 186) calc(var(--sz)* 0.0714rem);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.ON2 #volume-up-button:active, .ON2 #channel-up-button:active {
|
|
filter: none;
|
|
background: linear-gradient(0deg, rgb(46 46 46) 0%, rgb(38 38 38) 95%);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.ON1 #volume-down-button:active, .ON1 #channel-down-button:active {
|
|
filter: none;
|
|
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 95%);
|
|
box-shadow: none;
|
|
border: solid rgb(186 186 186) calc(var(--sz)* 0.0714rem);
|
|
border-top: 0;
|
|
}
|
|
|
|
.ON2 #volume-down-button:active, .ON2 #channel-down-button:active {
|
|
filter: none;
|
|
background: linear-gradient(180deg, rgb(46 46 46) 0%, rgb(38 38 38) 95%);
|
|
box-shadow: none;
|
|
border-top: 0;
|
|
}
|
|
|
|
.ON1 .afappsgrid, .ON2 .afappsgrid {
|
|
align-content: start;
|
|
margin: calc(var(--sz)* 0.75rem) 0 calc(var(--sz)* 3.75rem) 0;
|
|
}
|
|
|
|
.ON1 .srcButton {
|
|
border-color: #ccc;
|
|
}
|
|
|
|
.ON2 .srcButton {
|
|
border-color: #292929;
|
|
}
|
|
|
|
.ON1 .srcButton.appActive, .ON2 .srcButton.appActive {
|
|
box-shadow: rgb(0 0 0 / 13%) 0 calc(var(--sz)* 0.214rem) calc(var(--sz)* 0.1428rem) 0, white 0 0 calc(var(--sz)* 0.857rem) calc(var(--sz)* 0.429rem);
|
|
border-color: #e6e6e6;
|
|
animation-name: flash_border;
|
|
animation-duration: 2s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.ON2 .srcButton.appActive {
|
|
box-shadow: rgb(255 255 255 / 0%) 0 calc(var(--sz)* 0.214rem) calc(var(--sz)* 0.1428rem) 0, rgb(255 255 255 / 31%) 0 0 calc(var(--sz)* 0.857rem) calc(var(--sz)* 0.429rem);
|
|
}
|
|
|
|
@keyframes flash_border {
|
|
0% {
|
|
border-color: rgb(0 0 0 / 16%);
|
|
}
|
|
50% {
|
|
border-color: #fff;
|
|
}
|
|
100% {
|
|
border-color: rgb(0 0 0 / 16%);
|
|
}
|
|
}
|
|
|
|
.ON1 .srcButton:active, .ON2 .srcButton:active {
|
|
box-shadow: inset rgb(0 0 0 / 25%) 0 calc(var(--sz)* 0.214rem) calc(var(--sz)* 0.1428rem) 0;
|
|
}
|
|
|
|
.ON1 .deviceNameTop, .ON2 .deviceNameTop {
|
|
grid-column: 1 / 4;
|
|
margin: calc(var(--sz)* -1rem) 0;
|
|
}
|
|
|
|
.ON1 .deviceNameBottom, .ON2 .deviceNameBottom {
|
|
position: absolute;
|
|
bottom: calc(var(--sz)* 0.75rem);
|
|
margin: 0;
|
|
width: calc(var(--sz)* 12.286rem);
|
|
text-align: center;
|
|
}
|
|
|
|
.onnLogo {
|
|
position: absolute;
|
|
bottom: calc(var(--sz)* 2rem);
|
|
width: calc(var(--sz)* 12.286rem);
|
|
text-align: center;
|
|
}
|
|
|
|
.onnLogo svg {
|
|
max-width: calc(var(--sz)* 5rem);
|
|
max-height: calc(var(--sz)* 2rem);
|
|
}
|
|
|
|
.ON2 .onnLogo svg {
|
|
fill: #949494;
|
|
}
|
|
/* end onn. styles */
|
|
|
|
${unsafeCSS(launcherCSS)}
|
|
|
|
.functionFindRemoteButton, .functionMuteButton, .functionRebootButton,
|
|
.functionSystemUpdateButton, .functionKeyboardButton, .functionMenuButton, .functionSettingsButton {
|
|
color: #ff0000;
|
|
font-weight: bold;
|
|
background: #000;
|
|
border: solid calc(var(--sz) * 0.1rem) #850000;
|
|
display: block;
|
|
}
|
|
|
|
.functionAppSwitchButton, .functionAppManageButton {
|
|
background: #000;
|
|
}
|
|
|
|
.ON1 .functionRebootButton, .ON2 .functionRebootButton {
|
|
background: #fff;
|
|
}
|
|
|
|
.ON1 .functionSearchGoogleTVButton, .ON1 .functionCaptionsButton, .ON1 .functionpairingButton,
|
|
.ON2 .functionSearchGoogleTVButton, .ON2 .functionCaptionsButton, .ON2 .functionpairingButton {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.roku-remote-body .functionMuteButton, .roku-remote-body .functionVolumeUpButton, .roku-remote-body .functionVolumeDownButton, .roku-remote-body .functionFindRemoteButton,
|
|
.roku-remote-body .searchButton, .roku-remote-body .functionChannelUpButton, .roku-remote-body .functionChannelDownButton {
|
|
color: #c6c6c6;
|
|
font-weight: bold;
|
|
background: #662d91;
|
|
border: 0;
|
|
filter: none !important;
|
|
display: grid;
|
|
}
|
|
|
|
.functionAppleSettingsButton {
|
|
background: linear-gradient(0deg, rgba(143,143,148,1) 0%, rgba(228,228,233,1) 100%);
|
|
border: solid #838383 calc(var(--sz) * 0.05rem) !important;
|
|
}
|
|
|
|
.functionKeyboardButton {
|
|
display: inherit;
|
|
}
|
|
|
|
.functionFindRemoteButton > ha-icon, .functionMuteButton > ha-icon, .functionRebootButton > ha-icon, .functionSettingsButton > ha-icon {
|
|
display: none;
|
|
}
|
|
|
|
.ON1 .functionSystemUpdateButton, .ON2 .functionSystemUpdateButton {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.functionAppSwitchButton:active, .functionFindRemoteButton:active, .functionMuteButton:active, .functionRebootButton:active, .functionSettingsButton:active {
|
|
filter: none;
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.142rem) rgb(255 255 255 / 20%) !important;
|
|
}
|
|
|
|
.ON1 .functionFindRemoteButton,
|
|
.ON2 .functionFindRemoteButton {
|
|
color: yellow;
|
|
border: solid calc(var(--sz) * 0.1rem) #017374;
|
|
}
|
|
|
|
.shield-remote-body .functionFindRemoteButton, .shield-remote-body .functionMuteButton, .shield-remote-body .functionSystemUpdateButton,
|
|
.shield-remote-body .functionMuteButton, .shield-remote-body .functionRebootButton, .shield-remote-body .functionSettingsButton, .shield-remote-body .functionCaptionsButton {
|
|
color: rgb(153, 231, 0);
|
|
border: solid calc(var(--sz) * 0.1rem) #456800;
|
|
}
|
|
|
|
.functionFindRemoteButton {
|
|
font-size: calc(var(--sz) * .75rem);
|
|
}
|
|
.shield-remote-body .functionFindRemoteButton {
|
|
font-size: calc(var(--sz) * .75rem);
|
|
--mdc-icon-size: calc(var(--sz) * 1.4rem);
|
|
}
|
|
.roku-remote-body .functionFindRemoteButton {
|
|
font-size: calc(var(--sz) * .6rem);
|
|
}
|
|
|
|
.functionMuteButton {
|
|
font-size: calc(var(--sz) * 1rem);
|
|
}
|
|
.shield-remote-body .functionMuteButton {
|
|
font-size: calc(var(--sz) * 1.2rem);
|
|
--mdc-icon-size: calc(var(--sz) * 1.6rem);
|
|
}
|
|
|
|
.functionRebootButton {
|
|
font-size: calc(var(--sz) * 1rem);
|
|
}
|
|
.shield-remote-body .functionRebootButton {
|
|
font-size: calc(var(--sz) * 1rem);
|
|
--mdc-icon-size: calc(var(--sz) * 1.6rem);
|
|
}
|
|
.chromecast-remote-body .functionRebootButton {
|
|
font-size: calc(var(--sz) * 0.95rem);
|
|
background: #fff;
|
|
}
|
|
|
|
.apple-remote-body .functionAppSwitchButton {
|
|
background: rgb(33, 33, 33);
|
|
}
|
|
|
|
.functionSettingsButton {
|
|
font-size: calc(var(--sz) * .75rem);
|
|
}
|
|
.shield-remote-body .functionSettingsButton {
|
|
font-size: calc(var(--sz) * 0.86rem);
|
|
--mdc-icon-size: calc(var(--sz) * 1.5rem);
|
|
}
|
|
.chromecast-remote-body .functionSettingsButton, .chromecast-remote-body .functionSystemUpdateButton {
|
|
font-size: calc(var(--sz) * 0.7rem);
|
|
background: #fff;
|
|
}
|
|
|
|
.functionControlCenterButton {
|
|
background: rgb(215 215 215);
|
|
border: solid #838383 calc(var(--sz) * 0.05rem) !important;
|
|
}
|
|
|
|
.remote-logo {
|
|
grid-column-start: 1;
|
|
grid-column-end: 4;
|
|
padding: calc(var(--sz) * 2.5rem) calc(var(--sz) * 2.357rem) 0 calc(var(--sz) * 2.357rem);
|
|
width: calc(var(--sz) * 7.5714rem);
|
|
}
|
|
|
|
.AF6 .remote-logo {
|
|
padding: calc(var(--sz) * .75rem) calc(var(--sz) * 2.357rem) 0 calc(var(--sz) * 2.357rem);
|
|
}
|
|
|
|
.miLogo, .xiaomiLogo {
|
|
align-self: flex-end;
|
|
padding-bottom: calc(var(--sz) * 1.3rem)
|
|
}
|
|
|
|
.miLogo {
|
|
width: calc(var(--sz) * 2.75rem);
|
|
}
|
|
|
|
.ns1-body #keyboard-button {
|
|
margin-top: calc(var(--sz) * 1rem);
|
|
height: calc(var(--sz) * 5rem);
|
|
width: calc(var(--sz) * 5rem);
|
|
--mdc-icon-size: 34px;
|
|
}
|
|
|
|
.ns1-body .remote-button:active {
|
|
border: solid #395600 0.0714rem;
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(153 231 0 / 20%);
|
|
}
|
|
|
|
.ns1-body .remote-button:active > ha-icon {
|
|
color: #99e700 !important;
|
|
}
|
|
|
|
.litbutton {
|
|
border: solid #4b4c3c 0.0714rem;
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(255 255 25 / 15%);
|
|
}
|
|
.litbutton > ha-icon {
|
|
color: yellow !important;
|
|
}
|
|
|
|
.shield-remote-body .litbutton {
|
|
border: solid #500101 0.0714rem;
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(255 25 25 / 15%);
|
|
}
|
|
|
|
.shield-remote-body .litbutton > ha-icon,
|
|
.roku-remote-body #power-button.litbutton > ha-icon {
|
|
color: red !important;
|
|
}
|
|
|
|
.roku-remote-body #power-button.litbutton {
|
|
border: 0.0714rem solid rgb(92 0 0);
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(229 58 58 / 31%);
|
|
}
|
|
|
|
.roku-remote-body.RTR #power-button {
|
|
background: #810000;
|
|
}
|
|
|
|
.roku-remote-body.RTR #power-button > ha-icon {
|
|
color: #c6c6c6;
|
|
}
|
|
|
|
.roku-remote-body.RTR #power-button.litbutton {
|
|
background: rgb(159, 0, 0);
|
|
border: 0.0714rem solid rgb(139, 62, 62);
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(229 164 164 / 31%);
|
|
}
|
|
|
|
.roku-remote-body.RTR #power-button.litbutton > ha-icon {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.roku-remote-body #home-button.litbutton, .roku-remote-body #playpause-button.litbutton {
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(255 255 255 / 20%);
|
|
}
|
|
|
|
.roku-remote-body #home-button.litbutton > ha-icon, .roku-remote-body #playpause-button.litbutton > ha-icon {
|
|
color: white !important;
|
|
}
|
|
|
|
.XM2 .litbutton {
|
|
border: solid #5c2b00 0.0714rem;
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(229 124 58 / 31%);
|
|
}
|
|
|
|
.XM2 .litbutton > ha-icon, .XM2 .litbutton > .mdiSubstituteIconWrapper {
|
|
color: #ff7700 !important;
|
|
}
|
|
|
|
|
|
.chromecast-remote-body .litbutton, .chromecast-remote-body .appActive {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.chromecast-remote-body .appActive {
|
|
border: transparent;
|
|
}
|
|
|
|
.chromecast-remote-body .litbutton::before, .chromecast-remote-body .appActive::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0.25rem;
|
|
background: conic-gradient(from 0deg, rgba(66,133,244,1) 0%, rgba(219,68,55,1) 25%, rgba(244,180,0,1) 50%, rgba(15,157,88,1) 75%, rgba(66,133,244,1) 100%);
|
|
filter: blur(0.3rem) contrast(3);
|
|
transition: opacity 0.3s ease 0s;
|
|
border-radius: inherit;
|
|
animation: spin 7s linear infinite;
|
|
}
|
|
|
|
.chromecast-remote-body .appActive::before {
|
|
inset: calc(var(--sz) * -0.25rem);
|
|
filter: contrast(3);
|
|
}
|
|
|
|
@keyframes spin {
|
|
0 {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.chromecast-remote-body .litbutton::after, .chromecast-remote-body .appActive::after {
|
|
content: "";
|
|
z-index: -1;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: inherit;
|
|
border-radius: inherit;
|
|
inset: 0.15rem;
|
|
}
|
|
|
|
.chromecast-remote-body .litbutton > ha-icon {
|
|
color: #d70000 !important;
|
|
}
|
|
|
|
.apple-remote-body .litbutton {
|
|
background: rgb(255 255 255 / 25%) !important;
|
|
border: 0.01rem solid gray !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.apple-remote-body .litbutton > ha-icon {
|
|
color: rgb(33, 33, 33) !important;
|
|
}
|
|
|
|
.shield-remote-body.ns1-body .litbutton {
|
|
border: solid #395600 0.0714rem;
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(153 231 0 / 20%);
|
|
}
|
|
|
|
.shield-remote-body.ns1-body .litbutton > ha-icon {
|
|
color: #99e700 !important;
|
|
}
|
|
|
|
.dimlitbutton {
|
|
border: solid #34342b calc(var(--sz) * 0.0714rem);
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(255 255 116 / 15%);
|
|
}
|
|
.dimlitbutton > ha-icon {
|
|
color: #e5e59a !important;
|
|
}
|
|
|
|
.apple-remote-body .dimlitbutton {
|
|
border: 0.01rem solid gray !important;
|
|
background: none !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.apple-remote-body .dimlitbutton > ha-icon {
|
|
color: rgb(33, 33, 33) !important;
|
|
}
|
|
|
|
.shield-remote-body .dimlitbutton {
|
|
border: solid #3c1818 0.0714rem;
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(255 25 25 / 11%);
|
|
}
|
|
|
|
.shield-remote-body .dimlitbutton > ha-icon {
|
|
color: #ff7575 !important;
|
|
}
|
|
|
|
.XM2 .dimlitbutton {
|
|
border: solid #463327 0.0714rem;
|
|
box-shadow: 0 0 calc(var(--sz) * 0.857rem) calc(var(--sz) * 0.0714rem) rgb(255 143 36 / 21%);
|
|
}
|
|
|
|
.XM2 .dimlitbutton > ha-icon {
|
|
color: #b36d41 !important;
|
|
}
|
|
|
|
ha-icon {
|
|
pointer-events: none;
|
|
transform: scale(var(--sz));
|
|
}
|
|
|
|
.eightygap {
|
|
height: calc(var(--sz) * 5.7143rem);
|
|
}
|
|
`;
|
|
//`
|
|
|
|
getState() {
|
|
if(this._config.device_family === 'none' || this._config.entity === 'none') { return; }
|
|
if(this._config.android_tv_remote_entity == '' || typeof this._config.android_tv_remote_entity == 'undefined' || this._config.device_family == 'amazon-fire' ) {
|
|
return this.hass.states[this._config.entity];
|
|
}
|
|
else {
|
|
return this.hass.states[this._config.android_tv_remote_entity];
|
|
}
|
|
}
|
|
|
|
getOpenAppID() {
|
|
if(this._config.device_family === 'none' || this._config.entity === 'none') { return; }
|
|
else if(this._config.device_family == 'roku') {
|
|
return this.hass.states[this._config.entity].attributes.app_name;
|
|
}
|
|
else if(this._config.android_tv_remote_entity == '' || typeof this._config.android_tv_remote_entity == 'undefined' || this._config.device_family == 'amazon-fire' ) {
|
|
return this.hass.states[this._config.entity].attributes.app_id;
|
|
}
|
|
else {
|
|
if(this.getState().state == 'on') {
|
|
return this.hass.states[this._config.android_tv_remote_entity].attributes.current_activity;
|
|
}
|
|
}
|
|
}
|
|
|
|
createRenderRoot() {
|
|
const root = super.createRenderRoot();
|
|
// This section prevents unwanted scrolling on iOS devices when double clicking in a Sections view #508
|
|
root.addEventListener(
|
|
'dblclick',
|
|
(e) => (e.preventDefault())
|
|
);
|
|
return root;
|
|
}
|
|
|
|
|
|
render() {
|
|
if (!this.hass || !this._config) {
|
|
return html``;
|
|
}
|
|
|
|
const stateObj = this.hass.states[this._config.entity];
|
|
if (!stateObj && this._config.entity != 'none') {
|
|
return html` <ha-card>Unknown entity: ${this._config.entity}</ha-card> `;
|
|
}
|
|
const entityId = this._config.entity;
|
|
const state = this.getState();
|
|
const stateStr = state ? state.state : 'off';
|
|
const appId = this.getOpenAppID();
|
|
const deviceType = this._config.device_type;
|
|
const scale = (parseInt(this._config.scale) || 100)/100;
|
|
var launcherscaleoffset = 0;
|
|
if (this._config.app_launcher_relative_size) { launcherscaleoffset = (parseInt(this._config.app_launcher_relative_size) || 100)/100 };
|
|
const launcherscale = scale + launcherscaleoffset;
|
|
const overrides = this._config.button_overrides;
|
|
var buttonHidingCss = '';
|
|
if(overrides && typeof overrides === 'object') {
|
|
for (let [key, value] of Object.entries(overrides)) {
|
|
if(value && typeof value === 'object') {
|
|
for (let [action, actionvalue] of Object.entries(value)) {
|
|
if(action == 'hidden' && actionvalue == true) {
|
|
buttonHidingCss += '#'+key+' { opacity: 0; pointer-events: none; } ';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
var AppLaunchButtonFilterCssValue = 'grayscale(25%) brightness(58%)';
|
|
if(this._config.device_family == 'apple-tv') {
|
|
AppLaunchButtonFilterCssValue = 'grayscale(0%) brightness(100%)';
|
|
}
|
|
else if (['onn', 'homatics'].includes(this._config.device_family) || ['ON1', 'ON2', 'HO1', 'HO2', 'HO3', 'HO4'].includes(this._config.defaultRemoteStyle_override)) {
|
|
AppLaunchButtonFilterCssValue = 'grayscale(25%) brightness(80%)';
|
|
}
|
|
var guiEditorDirection = this.hass.config.language == 'he' ? 'rtl' : 'ltr';
|
|
const devicenamecolor = this._config.visible_name_text_color || '#000000';
|
|
var backgroundInherit = '';
|
|
if (this._config.use_theme_background == true) {
|
|
backgroundInherit = 'background: var(--ha-card-background,var(--card-background-color,#fff))!important; border: inherit !important; border-radius: inherit !important;';
|
|
}
|
|
if (this._config.useCustomSkin===true) {
|
|
var skin = '#4682b4';
|
|
if(this._config.skin) { skin = this._config.skin; }
|
|
backgroundInherit = 'background: '+skin+' !important;';
|
|
}
|
|
const cssVars = html `<style>
|
|
:host {
|
|
--sz: ${scale};
|
|
--devicenamecolor: ${devicenamecolor};
|
|
--appButtonFilter: ${AppLaunchButtonFilterCssValue};
|
|
}
|
|
${buttonHidingCss}
|
|
.AL1, .AL2 {
|
|
--sz: calc(${scale} * 2);
|
|
${backgroundInherit}
|
|
}
|
|
.AL2 .appLauncherAppsContainer {
|
|
--sz: calc(${launcherscale} * 2);
|
|
}
|
|
.CC1, .CC2, .CC3 {
|
|
--sz: calc(${scale} * 1.2);
|
|
}
|
|
.ALControlsContainer{
|
|
--sz: calc(${scale} * 1.5);
|
|
}
|
|
</style>`;
|
|
|
|
|
|
|
|
// Handle standard button highlight/lit states
|
|
var powerStatusClass = ''
|
|
var homeStatusClass = '';
|
|
var playingStatusClass = '';
|
|
var patchWallStatusClass = '';
|
|
if ((this._config.hide_button_highlights != true)) {
|
|
|
|
// Determine Power On/Off Status
|
|
if(stateStr != 'off' && stateStr != 'unavailable') {
|
|
powerStatusClass = ' litbutton';
|
|
}
|
|
if(stateStr == 'standby') {
|
|
powerStatusClass = ' dimlitbutton';
|
|
}
|
|
|
|
// Determine Home Status
|
|
if(['com.amazon.tv.launcher', 'com.google.android.tvlauncher', 'com.google.android.apps.tv.launcherx', 'Home'].includes(appId)) {
|
|
homeStatusClass = ' litbutton';
|
|
}
|
|
|
|
// Determine Play/Pause
|
|
var alwaysRegisterdAsPlaying = ['com.amazon.firebat', 'com.android.systemui', 'com.android.vending', 'com.android.tv.settings',
|
|
'com.nvidia.shieldtech.accessoryui', 'com.esaba.downloader', 'com.amazon.venezia'];
|
|
if(stateStr == 'playing' && !(alwaysRegisterdAsPlaying.includes(appId))) {
|
|
playingStatusClass = ' litbutton';
|
|
}
|
|
|
|
// Determine Patchwall Status
|
|
if(appId == 'com.mitv.tvhome.atv') {
|
|
patchWallStatusClass = ' litbutton';
|
|
}
|
|
}
|
|
|
|
// Get current device's Attributes AND use any applicable overrides from user conf
|
|
var confRef = this._config;
|
|
function getDeviceAttribute(deviceAttribute){
|
|
return deviceAttributeQuery(deviceAttribute, confRef);
|
|
}
|
|
|
|
// Rebuild AppMap - allow hdmi inputs where appropriate & add configured custom launchers from YAML
|
|
refreshAppMap(this._config, getDeviceAttribute('hdmiInputs'), getDeviceAttribute('avInputs'), getDeviceAttribute('tuner'));
|
|
|
|
// get app button details from appmap json
|
|
function getAppButtonData(config, configvalue, want) {
|
|
if(appmap.has(configvalue)) {
|
|
var deviceFamily = config["device_family"];
|
|
var familySpecificAppData = appmap.get(configvalue)[deviceFamily];
|
|
if(want=="active") {
|
|
if (config["device_type"]=="fire_tv_stick_4k_max_second_gen" || config["device_type"]=="fire_tv_stick_4k_second_gen") {
|
|
return "appActiveUnknown";
|
|
}
|
|
if (typeof appId != 'string') { return };
|
|
if(familySpecificAppData && !(appmap.get(configvalue).androidName) && !(appmap.get(configvalue).androidName2) && !(appmap.get(configvalue).appName)) {
|
|
return (appId == familySpecificAppData["androidName"] || appId == familySpecificAppData["androidName2"] || appId == familySpecificAppData["appName"]) ? "appActive" : "";
|
|
}
|
|
else {
|
|
return (appId == appmap.get(configvalue).androidName || appId == appmap.get(configvalue).androidName2) || appId == appmap.get(configvalue).appName ? "appActive" : "";
|
|
}
|
|
}
|
|
else {
|
|
if (appmap.get(configvalue)[want]) {
|
|
return appmap.get(configvalue)[want];
|
|
}
|
|
else if(familySpecificAppData) {
|
|
return familySpecificAppData[want];
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
return ' ';
|
|
}
|
|
}
|
|
|
|
function drawAppLaunchButtons(e, config, cols=3, max=6) {
|
|
var spanclass = "three-col-span afappsgrid";
|
|
if(cols == 2) {
|
|
spanclass = "two-col-span nsappsgrid";
|
|
}
|
|
if(cols == 1) {
|
|
spanclass = "appLauncherVerticalAppsContainer";
|
|
}
|
|
if(cols == 'fill') {
|
|
spanclass = "appLauncherAppsContainer";
|
|
}
|
|
function showHide(buttonKey) {
|
|
if (buttonKey === '') {
|
|
return 'hidden';
|
|
}
|
|
}
|
|
var buttonStyle = 'button';
|
|
const appLaunchButtons = new Map();
|
|
for(let i=1; i<=max; i++) {
|
|
var appid = config["app_launch_"+i] || '';
|
|
appLaunchButtons.set("confBtn"+i, appid);
|
|
}
|
|
|
|
// Properly apply default launcher buttons
|
|
var displayedRemote = config.defaultRemoteStyle_override || getDeviceAttribute("defaultRemoteStyle") || config.device_family;
|
|
if(['AF1', 'AF2', 'AF3', 'AF4', 'AF5', 'AF6', 'AL1', 'amazon-fire'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'prime-video');
|
|
appLaunchButtons.set("confBtn2", config.app_launch_2 || 'netflix');
|
|
appLaunchButtons.set("confBtn3", config.app_launch_3 || 'disney-plus');
|
|
appLaunchButtons.set("confBtn4", config.app_launch_4 || 'hulu');
|
|
}
|
|
else if(['AR1', 'AR2', 'AR3', 'apple-tv'].includes(displayedRemote)) {
|
|
buttonStyle = 'button-round';
|
|
}
|
|
else if(['CC1', 'CC2', 'CC3', 'chromecast'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'youtube');
|
|
appLaunchButtons.set("confBtn2", config.app_launch_2 || 'netflix');
|
|
buttonStyle = 'button-round';
|
|
}
|
|
else if(['NS1', 'NS2', 'nvidia-shield'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'netflix');
|
|
}
|
|
else if(['XM1', 'XM2', 'xiaomi'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'netflix');
|
|
appLaunchButtons.set("confBtn2", config.app_launch_2 || 'prime-video');
|
|
}
|
|
else if(['RSR', 'RVR'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'netflix');
|
|
appLaunchButtons.set("confBtn2", config.app_launch_2 || 'disney-plus');
|
|
appLaunchButtons.set("confBtn3", config.app_launch_3 || 'apple-tv');
|
|
appLaunchButtons.set("confBtn4", config.app_launch_4 || 'paramount-plus');
|
|
}
|
|
else if(['RTR'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'netflix');
|
|
appLaunchButtons.set("confBtn2", config.app_launch_2 || 'disney-plus');
|
|
appLaunchButtons.set("confBtn3", config.app_launch_3 || 'hulu');
|
|
appLaunchButtons.set("confBtn4", config.app_launch_4 || 'roku-channel');
|
|
}
|
|
else if(['RHR'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'netflix');
|
|
appLaunchButtons.set("confBtn2", config.app_launch_2 || 'hulu');
|
|
appLaunchButtons.set("confBtn3", config.app_launch_3 || 'roku-channel');
|
|
appLaunchButtons.set("confBtn4", config.app_launch_4 || 'disney-plus');
|
|
}
|
|
else if(['RVRP', 'RWR', 'roku'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'netflix');
|
|
appLaunchButtons.set("confBtn2", config.app_launch_2 || 'disney-plus');
|
|
appLaunchButtons.set("confBtn3", config.app_launch_3 || 'apple-tv');
|
|
appLaunchButtons.set("confBtn4", config.app_launch_4 || 'hulu');
|
|
}
|
|
else if(['AFJTV', 'AFXF2'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'prime-video');
|
|
appLaunchButtons.set("confBtn2", config.app_launch_2 || 'netflix');
|
|
appLaunchButtons.set("confBtn3", config.app_launch_3 || 'disney-plus');
|
|
appLaunchButtons.set("confBtn4", config.app_launch_4 || 'freeview-play');
|
|
}
|
|
else if(['ON1', 'ON2'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'youtube');
|
|
appLaunchButtons.set("confBtn2", config.app_launch_2 || 'netflix');
|
|
appLaunchButtons.set("confBtn3", config.app_launch_3 || 'disney-plus');
|
|
appLaunchButtons.set("confBtn4", config.app_launch_4 || 'paramount-plus');
|
|
}
|
|
else if(['HO1', 'HO2', 'HO3', 'HO4'].includes(displayedRemote)) {
|
|
appLaunchButtons.set("confBtn1", config.app_launch_1 || 'youtube');
|
|
appLaunchButtons.set("confBtn2", config.app_launch_2 || 'netflix');
|
|
appLaunchButtons.set("confBtn3", config.app_launch_3 || 'prime-video');
|
|
appLaunchButtons.set("confBtn4", config.app_launch_4 || 'rocket-launcher-btn');
|
|
}
|
|
|
|
|
|
// Return button HTML
|
|
if(['CC1', 'CC2', 'CC3', 'AR1', 'AR2', 'AR3'].includes(config.defaultRemoteStyle_override) || (['apple-tv', 'chromecast'].includes(config.device_family) && !(config.defaultRemoteStyle_override))) {
|
|
return html `
|
|
${ Array.from(appLaunchButtons.keys()).map(key => {
|
|
var val = appLaunchButtons.get(key);
|
|
if(val) {
|
|
return html `<button class="srcButton ${getAppButtonData(config, val, 'className')} ${getAppButtonData(config, val, 'active')} ${showHide(val)}" id="${val}-button" @click=${e.buttonDown}>
|
|
${unsafeHTML(getAppButtonData(config, val, buttonStyle) || getAppButtonData(config, val, 'button'))}
|
|
</button>`;
|
|
}
|
|
})}
|
|
`;
|
|
}
|
|
else {
|
|
return html `
|
|
<div class="${spanclass}">
|
|
${ Array.from(appLaunchButtons.keys()).map(key => {
|
|
var val = appLaunchButtons.get(key);
|
|
return html `<button class="srcButton ${getAppButtonData(config, val, 'className')} ${getAppButtonData(config, val, 'active')} ${showHide(val)}" id="${val}-button" @click=${e.buttonDown}>
|
|
${unsafeHTML(getAppButtonData(config, val, 'button'))}
|
|
</button>`;
|
|
|
|
})}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Draw optional device name
|
|
function drawDeviceName(e, config, section){
|
|
if(!config.visible_name_text) { return };
|
|
if(config.name_position=='bottom' && section=='bottom') {
|
|
return html`<div class="deviceNameBottom">${config.visible_name_text}</div>`;
|
|
}
|
|
else if(config.name_position=='top' && section=='top') {
|
|
return html`<div class="deviceNameTop">${config.visible_name_text}</div>`;
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Draw optional Firemote Version number
|
|
function drawFiremoteVersionNumber(e, config){
|
|
if(config.show_version_number === true) {
|
|
return html ` <div class="firemoteVersionNumber">${HAFiremoteVersion}</div>`;
|
|
}
|
|
}
|
|
|
|
//Draw Optional MediaControl buttons on CC
|
|
function drawMediaControlButtons(e, config) {
|
|
if (config.show_media_controls==true) {
|
|
return html`
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${e.buttonDown}>
|
|
<ha-icon icon="mdi:rewind"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${e.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${e.buttonDown}>
|
|
<ha-icon icon="mdi:fast-forward"></ha-icon>
|
|
</button>
|
|
`;
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Reused SVG Logos
|
|
function renderfiretvlogo() {
|
|
return html`
|
|
<!-- <div class="three-col-span">Remote name</div> -->
|
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
viewBox="0 0 1276 712" style="enable-background:new 0 0 1276 712;" xml:space="preserve" class="remote-logo">
|
|
<style type="text/css">
|
|
.st0{fill:#0f0f0f;}
|
|
</style>
|
|
<g id="Layer_7">
|
|
<path class="st0" d="M168.6,30.3c0.3,0.6,0.8,0.5,1.3,0.5c10,0.7,19.9,2.4,29.6,5c1.2,0.3,2.3,0.7,3.4,1.2c3.5,1.5,5.8,4,6.2,7.9
|
|
c0.2,1.7,0.5,3.4,0.5,5.1c0.1,4.7,0.1,9.5,0,14.2c0,1.4-0.2,2.8-0.6,4.2c-0.5,2.9-3.1,5-6,4.9c-2,0.1-4,0-6-0.2
|
|
c-4-0.5-7.9-1.3-11.9-1.8c-7.1-1-14.2-1.2-21.3-0.6c-4.3,0.3-8.6,1-12.8,2.1c-2.4,0.7-4.8,1.6-7,2.7c-5.8,2.9-9.4,7.7-11.6,13.7
|
|
c-1.4,4-2.2,8.1-2.5,12.3c-0.4,4.8-0.3,9.6-0.3,14.5c0,11.3,0,22.5,0,33.8v3.2c0.7,0.2,1.4,0.3,2.1,0.3c4.1,0,8.2,0,12.4,0h51.3
|
|
c1.2,0,2.4,0,3.6,0.1c4.7,0.4,7.2,3.6,7.6,7.9c0,0.6,0,1.2,0,1.8c0,6.3,0,12.7,0,19c0.1,0.9,0,1.8-0.1,2.7c-1,4.9-3.6,6.5-7.8,7.2
|
|
c-1.1,0.1-2.2,0.2-3.3,0.1h-62.2h-3.3c-0.1,0.5-0.3,1.1-0.3,1.6c0,0.9,0,1.8,0,2.7c0,65.7,0,131.3,0,197c0,1.3,0,2.6-0.1,3.9
|
|
c-0.4,4.4-3.1,7.2-7.5,7.7c-0.6,0.1-1.2,0.1-1.8,0.1c-10.2,0-20.3,0-30.5,0c-1.3,0-2.6-0.2-3.8-0.6c-3.3-1.1-5-3.6-5.4-6.9
|
|
c-0.1-1.3-0.1-2.6-0.1-3.9c0-65.9,0-131.8,0-197.7v-3.8c-1-0.1-1.9-0.2-2.8-0.2c-11.2,0-22.3,0-33.5,0c-1.4,0-2.8-0.2-4.2-0.5
|
|
c-3.2-0.6-5.6-3.2-6-6.4c-0.1-0.3-0.1-0.6-0.2-0.9c0.1-0.4,0.1-0.8,0.2-1.2c0-4.1,0-8.2-0.1-12.3c0-1.2-0.1-2.4-0.1-3.6
|
|
c0.5-4.5,3.1-7,7.5-7.9c1.8-0.4,3.5-0.8,5.3-1c4-0.5,8-0.9,12-1.4c6.3-0.8,12.5-1.6,18.8-2.4c1-0.1,1.9-0.4,3.1-0.6v-3.1
|
|
c0-12.4,0-24.7,0-37.1c-0.1-8,0.5-16.1,1.9-24c1.2-7.6,3.5-15.1,6.7-22.1c3.9-8.5,9.7-16,17-21.8c9.6-7.6,20.7-11.7,32.7-13.7
|
|
c3.7-0.7,7.5-1.2,11.3-1.4c0.4-0.1,0.7-0.2,1-0.5H168.6z"/>
|
|
<path class="st0" d="M573.7,678c0-0.2,0-0.4-0.1-0.5c1.5,0,3-0.1,4.5-0.1h97.7c1.4,0,2.8,0.1,4.2,0.1c0,0.2-0.1,0.3-0.1,0.5
|
|
L573.7,678z"/>
|
|
<path class="st0" d="M32.7,167.3l0.9-0.1c0,1.2,0.1,2.4,0.1,3.6c0,4.1,0,8.2,0.1,12.3c0,0.4-0.1,0.8-0.2,1.2l-0.9-0.1V167.3z"/>
|
|
<path class="st0" d="M680,677.4c-1.4,0-2.8-0.1-4.2-0.1h-97.7c-1.5,0-3,0-4.5,0.1c-4.5-0.3-9-0.7-13.5-1.1
|
|
c-2.4-0.2-4.8-0.5-7.2-0.7c-8.1-0.8-16.2-1.9-24.2-3c-12.6-1.7-25.2-3.8-37.7-6.3c-9.3-1.8-18.7-3.9-27.9-6.1
|
|
c-17-4-33.8-8.7-50.4-14.1c-15.3-4.9-30.4-10.4-45.3-16.3c-14.9-6-29.6-12.4-44.1-19.5c-32.2-15.6-63.2-33.6-92.6-54
|
|
c-14-9.7-27.6-19.9-40.8-30.6c-9.3-7.5-18.4-15.3-27.3-23.3c-1.2-1.1-2.3-2.2-3.4-3.4c-1.4-1.7-2.2-3.9-2.2-6.1
|
|
c0-3.9,2.9-7.2,6.8-7.6c2.4-0.3,4.9,0.1,7,1.3c2.7,1.4,5.2,3,7.9,4.4c8.6,4.7,17.2,9.6,25.9,14.1s17.3,8.9,26.1,13.2
|
|
c14.4,7,28.9,13.5,43.7,19.7c15,6.3,30.2,12.2,45.5,17.7c17,6.1,34.2,11.7,51.5,16.8c16.8,5,33.8,9.5,50.9,13.5
|
|
c14.8,3.5,29.6,6.7,44.5,9.3c9.5,1.7,19,3.3,28.5,4.8c7.7,1.2,15.5,2.4,23.2,3.4c6,0.8,12,1.4,18,2c4.8,0.5,9.6,1.1,14.4,1.6
|
|
c2.8,0.3,5.6,0.5,8.4,0.7c4.3,0.4,8.6,0.8,12.9,1.1c4.6,0.3,9.2,0.6,13.8,0.8c6.6,0.4,13.2,0.7,19.9,1c3.1,0.1,6.2,0.1,9.3,0.2
|
|
c3.5,0,7,0.1,10.6,0.1c6,0.1,12.1,0.3,18.1,0.3c9.1-0.1,18.3-0.3,27.4-0.6c4.1-0.1,8.2-0.3,12.3-0.6c7.5-0.5,15-1,22.5-1.6
|
|
c3.6-0.3,7.2-0.5,10.8-0.8c5.1-0.5,10.2-1.1,15.3-1.6c2.2-0.2,4.4-0.4,6.6-0.7c4.6-0.5,9.2-1.1,13.7-1.7c3.8-0.5,7.6-0.9,11.4-1.4
|
|
c3.2-0.4,6.4-0.9,9.5-1.4c5.6-0.9,11.1-1.8,16.6-2.7c5.1-0.9,10.3-1.7,15.4-2.7c8.5-1.6,16.9-3.4,25.4-5.2
|
|
c7.2-1.5,14.3-3.2,21.4-4.8c16.6-3.9,33.1-8.4,49.4-13.3c28.7-8.5,56.9-18.5,84.6-29.8c3.3-1.4,6.7-2.8,10-4.2
|
|
c2.8-1.2,5.8-1.8,8.8-1.6c4.7,0.3,8.8,2.1,11.6,6.1c3.2,4.5,3,9.2,0.4,13.9c-1.5,2.4-3.4,4.5-5.8,6.1c-9.7,7.2-19.7,13.9-29.9,20.3
|
|
c-12.5,7.8-25.4,15.1-38.6,21.8c-18.5,9.5-37.5,18-56.8,25.6c-12.1,4.8-24.4,9.2-36.8,13.2c-16.4,5.3-33,10.1-49.7,14.3
|
|
c-11.3,2.8-22.6,5.4-34.1,7.7c-8.3,1.7-16.6,3-24.9,4.4c-5.9,1-11.9,2-17.8,2.8c-5.5,0.8-11,1.4-16.4,2c-4.6,0.6-9.2,1.1-13.8,1.6
|
|
C688.3,676.9,684.2,677.2,680,677.4z"/>
|
|
<path class="st0" d="M564.2,290c0.2,3.7,0.2,7.2,0.5,10.7c0.4,4.1,1,8.2,1.7,12.2c2,11.2,5.5,21.8,11.8,31.3
|
|
c6.1,9.2,14.7,16.5,24.8,20.9c6.8,3,14,5.1,21.3,6.3c9.2,1.5,18.6,2.1,27.9,1.8c4.7-0.1,9.4-0.3,14.1-0.8
|
|
c8.7-0.7,17.3-2.2,25.8-4.4c7.8-2.1,15.7-4.4,23.5-6.6c1.9-0.6,3.9-0.9,5.9-1c2.5,0,4.7,1.6,5.4,4c0.4,1,0.6,2.1,0.6,3.2
|
|
c0.1,6.2,0.1,12.5,0,18.7c0.1,3.9-2,7.6-5.5,9.4c-3.6,2-7.3,3.8-11.2,5.1c-9.6,3.4-19.5,6.1-29.6,8c-6.3,1.2-12.7,2.1-19,2.8
|
|
c-3.7,0.4-7.4,0.6-11.1,0.8c-3,0.2-6,0.4-9,0.4c-8.5,0-17.1-0.4-25.5-1.5c-10.6-1.2-21-3.7-31-7.3c-15.4-5.5-29.1-14.9-39.9-27.2
|
|
c-7.9-9.2-14.1-19.6-18.4-30.9c-3.7-9.5-6.4-19.5-8-29.6c-1.2-7.3-2-14.7-2.5-22.1c-0.5-8.8-0.6-17.7-0.2-26.5
|
|
c0.2-6.2,0.8-12.4,1.7-18.6c2.4-16.8,6.9-33,15.1-48c9.4-17.2,22.4-31,39.6-40.8c9.1-5.1,18.9-8.8,29.2-11.1
|
|
c7.2-1.6,14.6-2.6,22-3.1c6.1-0.4,12.2-0.5,18.4-0.2c8.9,0.3,17.8,1.7,26.4,4c13.3,3.6,25.2,9.7,35.4,19.1
|
|
c6.2,5.7,11.4,12.4,15.6,19.8c5.2,9.4,8.8,19.6,10.7,30.2c2.1,11.1,2.9,22.3,2.4,33.6c-0.2,4.7-0.3,9.4-0.7,14.1
|
|
c-0.3,5.4-1.1,10.8-2.2,16.1c-1.3,5.3-3.4,6.9-8.9,7.2c-1.1,0-2.2,0-3.3,0H567.6C566.5,289.9,565.4,290,564.2,290z M687.7,256.8
|
|
c0.2-2.4,0.5-4.5,0.5-6.6c0.3-7.1-0.1-14.3-1-21.3c-0.9-6.5-2.7-12.8-5.4-18.7c-5.2-11.4-15-20.1-26.9-23.8
|
|
c-6.5-2-13.3-3.1-20.1-3.3c-3.4-0.1-6.8,0-10.2,0.4c-5,0.4-9.9,1.3-14.8,2.6c-13.1,3.6-24.5,12-31.9,23.4c-4.4,7-7.7,14.6-9.8,22.5
|
|
c-1.5,6-2.7,12.1-3.4,18.3c-0.1,1-0.2,2-0.2,3c0,1.1-0.4,2.2,0.1,3.2c0.3,0.1,0.6,0.2,0.9,0.2L687.7,256.8z"/>
|
|
<path class="st0" d="M847.4,192.2c-1.3,0-2.3-0.1-3.3-0.1c-10.6,0-21.1,0-31.7,0c-1.5,0-3-0.2-4.5-0.5c-3.5-0.8-5.4-3.3-6-6.8
|
|
c-0.1-0.9-0.2-1.8-0.2-2.7c0-4.2,0-8.4,0-12.7c0-0.7,0-1.4,0.1-2.1c0.4-3.6,2.1-6.3,5.7-7.3c2-0.6,4.1-1.1,6.1-1.5
|
|
c4-0.6,8-0.9,12-1.4c4.2-0.5,8.4-1.1,12.5-1.6c2.2-0.3,4.4-0.5,6.6-0.8c1.3-0.2,2.6-0.4,4-0.6c0.2-1.5,0.5-2.8,0.7-4.2
|
|
c0.5-4.8,0.9-9.6,1.4-14.4s1.1-9.4,1.6-14.1c0.3-2.7,0.5-5.4,0.8-8.1c0.5-4.9,1.1-9.8,1.6-14.7c0.3-2.4,0.5-4.8,0.7-7.2
|
|
c0.2-1.5,0.6-3,1.4-4.3c1.2-2.4,3.5-4,6.2-4.3c1.8-0.3,3.6-0.4,5.4-0.4c4.6-0.1,9.3-0.1,13.9,0c2.2,0,4.4,0.1,6.6,0.3
|
|
c4.5,0.4,7.3,3.3,7.7,7.8c0.1,1,0.1,2,0.1,3v55.8c0,1.1,0.1,2.2,0.1,3.3c1.1,0.3,2.2,0.4,3.4,0.3c19.7,0,39.4,0,59.2,0
|
|
c1.6,0,3.2,0.1,4.8,0.3c3.5,0.4,6.3,3.1,6.8,6.6c0.2,1.1,0.3,2.2,0.4,3.3c0,6.2,0,12.5,0,18.7c0,1.4-0.2,2.8-0.6,4.2
|
|
c-0.6,2.8-2.9,5-5.8,5.5c-1.6,0.3-3.2,0.4-4.8,0.5c-19.9,0-39.9,0-59.8,0H897c-0.1,0.7-0.2,1.2-0.3,1.8s0,1.2,0,1.8
|
|
c0,46.6,0,93.2,0,139.7c-0.1,4.9,0.5,9.8,1.8,14.6c1.3,4.5,3.3,8.6,7,11.8c3,2.5,6.6,4.3,10.4,5.2c6.7,1.7,13.7,2.3,20.6,1.9
|
|
c7.8-0.5,15.6-1.5,23.3-3.1c1.7-0.3,3.4-0.6,5.1-0.8c1.4-0.2,2.8-0.1,4.2,0.3c1.7,0.4,3.1,1.7,3.5,3.4c0.4,1.3,0.7,2.7,0.7,4.1
|
|
c0.1,5.7,0.1,11.5,0,17.2c-0.1,1.7-0.3,3.4-0.8,5c-0.5,2.2-1.9,4.1-3.8,5.2c-1.6,1-3.4,1.8-5.2,2.4c-4.9,1.6-9.8,2.8-14.9,3.6
|
|
c-5.7,1-11.5,1.6-17.3,2c-6.2,0.5-12.5,0.6-18.7,0.3c-11-0.5-21.8-2.2-31.9-6.8c-12.1-5.3-21.7-15.1-26.8-27.3
|
|
c-3-7-4.9-14.5-5.7-22.1c-0.7-6.2-1-12.4-0.9-18.6c0-45.9,0-91.7,0-137.6L847.4,192.2z"/>
|
|
<path class="st0" d="M1120.6,359.9c1.1-3.1,2-5.5,2.9-7.9c6.3-18,12.6-36,18.9-54c7.9-22.4,15.7-44.9,23.6-67.3
|
|
c5.2-14.7,10.3-29.3,15.5-44c2.4-6.8,4.8-13.6,7.2-20.4c1-2.6,2.1-5.2,3.4-7.7c1.5-2.9,4.4-4.8,7.7-5c2.3-0.2,4.6-0.4,6.9-0.4
|
|
c8.2-0.1,16.3-0.1,24.4,0c1.5,0,3,0.1,4.5,0.4c2.8,0.5,4.3,2.3,4.4,5.2c0.1,2.4-0.3,4.8-1.2,7c-9.1,22.8-18.1,45.5-27,68.3
|
|
c-9.2,23.3-18.4,46.7-27.7,70c-6.4,16.1-12.7,32.1-19.1,48.1c-5.6,14.1-11.2,28.2-16.8,42.3c-0.5,1.3-1.2,2.5-1.8,3.8
|
|
c-1.9,4.4-5.5,6.5-10.2,6.8c-0.8,0.1-1.6,0.1-2.4,0.1c-9.9,0-19.7,0-29.6-0.1c-1.4-0.1-2.8-0.3-4.2-0.6c-2.8-0.4-5.3-2.2-6.6-4.8
|
|
c-1-1.9-2-3.7-2.8-5.7c-14.7-36.6-29.3-73.3-43.8-109.9c-8.6-21.6-17.2-43.3-25.8-64.9c-6.2-15.7-12.5-31.3-18.7-47
|
|
c-1-2.6-2-5.2-3-7.9c-0.7-1.7-1-3.5-0.9-5.3c0.2-3.2,1.7-5.1,4.8-5.7c1.2-0.2,2.4-0.4,3.6-0.4c9.5,0,18.9,0,28.4,0c2,0,4,0.2,6,0.5
|
|
c3.1,0.2,5.8,2,7.3,4.7c1.1,2,2.1,4.1,3,6.2c2.5,6.9,4.9,13.8,7.4,20.7l19.9,56.9l23.6,67l17.1,48.5
|
|
C1119.9,358.1,1120.1,358.6,1120.6,359.9z"/>
|
|
<path class="st0" d="M412.5,219.5v3.8c0,56.7,0,113.4,0,170.2c0.1,1.9-0.1,3.8-0.5,5.7c-1,3.5-3.4,5.3-6.8,6c-1,0.2-2,0.2-3,0.2
|
|
h-29c-1.6,0-3.2-0.2-4.7-0.7c-2.3-0.8-4.1-2.6-4.8-5c-0.4-1.4-0.6-2.7-0.6-4.2c-0.1-2.1,0-4.2,0-6.3c0-74.9,0-149.9,0-224.8
|
|
c-0.1-1.7,0.1-3.4,0.5-5.1c0.5-2.5,2.4-4.5,4.9-5.2c1.6-0.5,3.3-0.8,5-0.8c7-0.1,14.1-0.1,21.1,0c1.5,0,3,0.2,4.5,0.5
|
|
c3.3,0.6,5.9,3.1,6.6,6.3c0.5,2.1,0.9,4.3,1.2,6.5c0.6,4.4,1.1,8.8,1.7,13.1c0.3,2.4,0.5,4.8,0.8,7.2c0.1,1,0.3,1.9,0.5,3.2
|
|
c1.4-1.1,2.7-2.4,3.9-3.7c8.8-8.9,18-17.2,28.9-23.5c8.3-4.8,17.3-8.2,26.7-9.9c8-1.4,16.2-1.9,24.3-1.5c1.7,0.1,3.4,0.2,5.1,0.4
|
|
c1.2,0.2,2.4,0.4,3.5,0.9c2.8,1,4.8,3.6,4.9,6.7c0.1,0.8,0.1,1.6,0.1,2.4c0,8.3,0,16.7,0,25c0.1,1.7-0.1,3.4-0.6,5.1
|
|
c-0.7,2.2-2.4,3.8-4.6,4.3c-1.6,0.4-3.3,0.6-5,0.5c-7.3-0.3-14.6-1.2-22-0.9c-12.9,0.5-25.5,3.2-37.4,8.2
|
|
c-8.5,3.6-16.5,8.4-23.6,14.2C413.5,218.5,413.1,218.9,412.5,219.5z"/>
|
|
<path class="st0" d="M298.4,279.2c0,38.4,0,76.8,0,115.2c0,1.5-0.1,3-0.4,4.5c-0.9,4-3.8,5.7-7.2,6.2c-0.8,0.1-1.6,0.1-2.4,0.1
|
|
c-9.7,0-19.3,0-29,0c-1.5,0-3-0.2-4.5-0.6c-2.7-0.6-4.8-2.8-5.3-5.6c-0.3-1.5-0.5-3-0.6-4.5c0-0.5,0-1,0-1.5
|
|
c0-75.9,0-151.9,0-227.8c-0.1-1.9,0.1-3.8,0.5-5.7c0.6-3.2,3.2-5.6,6.3-6.1c1.5-0.3,3-0.4,4.5-0.4c9.1,0,18.1,0,27.2,0
|
|
c1.3,0,2.6,0.1,3.9,0.4c4.9,0.9,6.5,3.9,7,7.5c0.1,1.1,0.1,2.2,0.1,3.3L298.4,279.2z"/>
|
|
<path class="st0" d="M1036.1,466.5c6.1,0.3,12.3,0.4,18.4,0.9c10.4,0.8,20.8,2.3,30.8,5.4c2.8,0.9,5.4,2.1,8.1,3.2
|
|
c4.8,2,7.1,5.9,7.9,10.9c0.9,5.3,0.8,10.6,0.7,15.9c-0.3,6.9-1,13.8-2.3,20.6c-2,11.5-4.9,22.8-8.6,33.8
|
|
c-5.3,15.9-12.4,31.2-21.2,45.5c-5.2,8.4-11.1,16.3-17.8,23.5c-3.7,4.1-7.7,7.9-12,11.4c-1.4,1.3-3.1,2.3-4.9,2.9
|
|
c-1.1,0.4-2.3,0.6-3.5,0.6c-3.7,0.1-6-2.6-5.5-6.2c0.3-1.6,0.7-3.1,1.4-4.6c1.9-5.1,4-10.1,6-15.1c5.4-13.8,10.5-27.8,15-41.9
|
|
c3.1-9.6,5.6-19.3,7.6-29.1c0.8-3.9,1.2-7.9,1.6-11.9c0.3-3.4,0.2-6.8-0.2-10.2c-0.1-0.6-0.1-1.2-0.2-1.8c-0.8-5-4.1-9.2-8.7-11.2
|
|
c-4.1-1.8-8.5-3.1-13-3.8c-4.7-0.8-9.4-1.1-14.1-1.4c-6.6-0.4-13.3-0.4-19.9-0.3c-5.3,0.1-10.6,0.5-15.9,0.9
|
|
c-3.6,0.2-7.2,0.4-10.8,0.8c-6,0.5-12,1.1-18,1.7c-4.5,0.4-9,0.9-13.5,1.4c-2.4,0.3-4.8,0.7-7.2,0.9c-1.6,0.2-3.2,0.2-4.8,0.3
|
|
c-0.4,0-0.8,0-1.2-0.1c-4.3-0.7-6.2-3.5-4.6-7.8c0.5-1.2,1.2-2.3,2.1-3.3c1.2-1.3,2.6-2.5,4.1-3.5c11.2-7.7,23.5-13.7,36.4-17.8
|
|
c10.1-3.3,20.5-5.8,31-7.4c7.4-1.2,14.9-2,22.4-2.4C1026.3,467,1031.2,466.8,1036.1,466.5z"/>
|
|
<path class="st0" d="M274.1,49c4.6-0.3,9.3,0.5,13.6,2.2c7.4,2.9,13.2,9,15.5,16.6c2.3,7,2.3,14.6,0,21.6c-2.9,9.1-9,15-18.2,17.7
|
|
c-7.5,2.3-15.4,2.2-22.8-0.2c-9.2-2.9-15.2-9.1-17.9-18.4c-2-6.6-1.9-13.6,0.2-20.2c3.2-10.2,10.3-16.2,20.6-18.7
|
|
C268.1,49.1,271.1,48.8,274.1,49z"/>
|
|
</g>
|
|
</svg>
|
|
`;
|
|
}
|
|
|
|
function renderAmazonArrowlogo() {
|
|
return html`<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" x="0px" y="0px" viewBox="0 0 733 200" style="enable-background:new 0 0 1276 712;" xml:space="preserve" class="remote-logo"><g><path style="stroke:none;stroke-width:1;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#0f0f0f;fill-rule:nonzero;opacity:1" transform="matrix(.75 0 0 .75 -112.16 -331.09)" d="M680 677.4c-1.4 0-2.8-.1-4.2-.1h-97.7c-1.5 0-3 0-4.5.1-4.5-.3-9-.7-13.5-1.1-2.4-.2-4.8-.5-7.2-.7-8.1-.8-16.2-1.9-24.2-3-12.6-1.7-25.2-3.8-37.7-6.3-9.3-1.8-18.7-3.9-27.9-6.1-17-4-33.8-8.7-50.4-14.1-15.3-4.9-30.4-10.4-45.3-16.3-14.9-6-29.6-12.4-44.1-19.5-32.2-15.6-63.2-33.6-92.6-54-14-9.7-27.6-19.9-40.8-30.6-9.3-7.5-18.4-15.3-27.3-23.3-1.2-1.1-2.3-2.2-3.4-3.4-1.4-1.7-2.2-3.9-2.2-6.1 0-3.9 2.9-7.2 6.8-7.6 2.4-.3 4.9.1 7 1.3 2.7 1.4 5.2 3 7.9 4.4 8.6 4.7 17.2 9.6 25.9 14.1s17.3 8.9 26.1 13.2c14.4 7 28.9 13.5 43.7 19.7 15 6.3 30.2 12.2 45.5 17.7 17 6.1 34.2 11.7 51.5 16.8 16.8 5 33.8 9.5 50.9 13.5 14.8 3.5 29.6 6.7 44.5 9.3 9.5 1.7 19 3.3 28.5 4.8 7.7 1.2 15.5 2.4 23.2 3.4 6 .8 12 1.4 18 2 4.8.5 9.6 1.1 14.4 1.6 2.8.3 5.6.5 8.4.7 4.3.4 8.6.8 12.9 1.1 4.6.3 9.2.6 13.8.8 6.6.4 13.2.7 19.9 1 3.1.1 6.2.1 9.3.2 3.5 0 7 .1 10.6.1 6 .1 12.1.3 18.1.3 9.1-.1 18.3-.3 27.4-.6 4.1-.1 8.2-.3 12.3-.6 7.5-.5 15-1 22.5-1.6 3.6-.3 7.2-.5 10.8-.8 5.1-.5 10.2-1.1 15.3-1.6 2.2-.2 4.4-.4 6.6-.7 4.6-.5 9.2-1.1 13.7-1.7 3.8-.5 7.6-.9 11.4-1.4 3.2-.4 6.4-.9 9.5-1.4 5.6-.9 11.1-1.8 16.6-2.7 5.1-.9 10.3-1.7 15.4-2.7 8.5-1.6 16.9-3.4 25.4-5.2 7.2-1.5 14.3-3.2 21.4-4.8 16.6-3.9 33.1-8.4 49.4-13.3 28.7-8.5 56.9-18.5 84.6-29.8 3.3-1.4 6.7-2.8 10-4.2 2.8-1.2 5.8-1.8 8.8-1.6 4.7.3 8.8 2.1 11.6 6.1 3.2 4.5 3 9.2.4 13.9-1.5 2.4-3.4 4.5-5.8 6.1-9.7 7.2-19.7 13.9-29.9 20.3-12.5 7.8-25.4 15.1-38.6 21.8-18.5 9.5-37.5 18-56.8 25.6-12.1 4.8-24.4 9.2-36.8 13.2-16.4 5.3-33 10.1-49.7 14.3-11.3 2.8-22.6 5.4-34.1 7.7-8.3 1.7-16.6 3-24.9 4.4-5.9 1-11.9 2-17.8 2.8-5.5.8-11 1.4-16.4 2-4.6.6-9.2 1.1-13.8 1.6-4.1.5-8.2.8-12.4 1z"/><path style="stroke:none;stroke-width:1;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#0f0f0f;fill-rule:nonzero;opacity:1" transform="matrix(.75 0 0 .75 -112.16 -331.09)" d="M1036.1 466.5c6.1.3 12.3.4 18.4.9 10.4.8 20.8 2.3 30.8 5.4 2.8.9 5.4 2.1 8.1 3.2 4.8 2 7.1 5.9 7.9 10.9.9 5.3.8 10.6.7 15.9-.3 6.9-1 13.8-2.3 20.6-2 11.5-4.9 22.8-8.6 33.8-5.3 15.9-12.4 31.2-21.2 45.5-5.2 8.4-11.1 16.3-17.8 23.5-3.7 4.1-7.7 7.9-12 11.4-1.4 1.3-3.1 2.3-4.9 2.9-1.1.4-2.3.6-3.5.6-3.7.1-6-2.6-5.5-6.2.3-1.6.7-3.1 1.4-4.6 1.9-5.1 4-10.1 6-15.1 5.4-13.8 10.5-27.8 15-41.9 3.1-9.6 5.6-19.3 7.6-29.1.8-3.9 1.2-7.9 1.6-11.9.3-3.4.2-6.8-.2-10.2-.1-.6-.1-1.2-.2-1.8-.8-5-4.1-9.2-8.7-11.2-4.1-1.8-8.5-3.1-13-3.8-4.7-.8-9.4-1.1-14.1-1.4-6.6-.4-13.3-.4-19.9-.3-5.3.1-10.6.5-15.9.9-3.6.2-7.2.4-10.8.8-6 .5-12 1.1-18 1.7-4.5.4-9 .9-13.5 1.4-2.4.3-4.8.7-7.2.9-1.6.2-3.2.2-4.8.3-.4 0-.8 0-1.2-.1-4.3-.7-6.2-3.5-4.6-7.8.5-1.2 1.2-2.3 2.1-3.3 1.2-1.3 2.6-2.5 4.1-3.5 11.2-7.7 23.5-13.7 36.4-17.8 10.1-3.3 20.5-5.8 31-7.4 7.4-1.2 14.9-2 22.4-2.4 4.6-.3 9.5-.5 14.4-.8z"/></g></svg>
|
|
`;
|
|
}
|
|
|
|
function renderAmazonNameWithArrowLogo() {
|
|
return html`<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0, 0, 400,140.46511627906978" xml:space="preserve" x="0px" y="0px" class="remote-logo" style="margin-top: 90px;"><g id="svgg"><path id="path0" d="M36.047 13.922 C 25.440 15.663,18.409 21.339,16.256 29.898 C 15.386 33.355,15.944 33.716,23.234 34.417 C 30.107 35.077,29.928 35.133,31.381 31.849 C 35.652 22.191,47.907 24.668,47.907 35.188 L 47.907 38.454 43.140 39.025 C 24.310 41.281,17.443 45.404,14.649 56.130 C 9.599 75.517,31.970 87.543,47.354 73.711 C 50.201 71.152,50.324 71.150,52.031 73.631 C 56.460 80.068,57.623 80.160,64.096 74.585 C 70.037 69.467,69.989 69.602,67.234 65.658 C 64.385 61.578,64.186 60.199,64.186 44.481 C 64.186 26.725,63.554 23.541,59.226 19.494 C 54.323 14.909,44.469 12.540,36.047 13.922 M186.744 13.922 C 176.330 15.631,169.990 20.534,167.390 28.888 C 165.975 33.434,166.192 33.603,174.534 34.465 C 180.636 35.095,181.475 34.834,182.015 32.134 C 182.650 28.960,186.790 26.067,190.698 26.067 C 195.996 26.067,198.575 29.032,198.594 35.144 L 198.605 38.427 190.985 39.444 C 173.765 41.743,166.724 46.806,165.131 58.037 C 162.420 77.148,182.807 86.721,198.346 73.634 L 201.111 71.305 203.071 73.969 C 207.640 80.175,208.370 80.214,214.845 74.602 C 220.532 69.673,220.651 69.411,218.542 66.499 C 215.103 61.751,215.144 62.006,214.858 43.721 C 214.565 24.975,214.487 24.520,210.880 20.508 C 206.094 15.184,195.940 12.413,186.744 13.922 M103.899 14.583 C 99.212 15.774,95.610 18.697,93.516 23.008 L 92.605 24.884 92.581 20.847 C 92.549 15.291,92.629 15.349,84.923 15.349 C 76.242 15.349,77.209 11.371,77.209 47.058 C 77.209 82.676,76.169 78.605,85.269 78.605 C 94.395 78.605,93.488 80.962,93.488 57.232 C 93.488 45.213,93.678 36.835,93.983 35.415 C 95.655 27.619,105.435 26.650,107.490 34.077 C 107.875 35.469,108.008 42.004,107.942 56.367 C 107.830 81.094,106.905 78.605,116.207 78.605 C 125.083 78.605,124.186 80.942,124.186 57.818 C 124.186 38.303,124.445 34.648,125.977 32.558 C 129.093 28.308,135.775 28.118,138.015 32.217 C 138.762 33.584,138.849 35.710,138.967 55.581 C 139.121 81.421,138.135 78.605,147.032 78.605 C 155.910 78.605,154.946 81.978,154.786 51.460 L 154.651 25.814 153.433 23.216 C 147.911 11.442,127.228 11.472,123.487 23.259 C 123.044 24.655,122.683 24.419,121.030 21.656 C 117.442 15.657,110.671 12.862,103.899 14.583 M298.774 14.615 C 285.440 17.133,277.963 28.760,277.963 46.977 C 277.963 67.645,287.466 79.560,303.922 79.525 C 321.679 79.488,332.781 61.905,329.312 39.314 C 326.649 21.981,313.990 11.742,298.774 14.615 M365.706 14.444 C 361.132 15.347,357.594 18.136,355.118 22.791 L 353.510 25.814 353.499 21.063 C 353.490 16.848,353.387 16.257,352.589 15.830 C 351.292 15.136,339.868 15.202,339.163 15.907 C 338.059 17.010,338.392 77.528,339.504 78.123 C 341.175 79.017,352.760 78.736,353.625 77.780 C 354.279 77.057,354.391 74.526,354.535 57.199 C 354.706 36.517,354.794 35.590,356.865 32.546 C 360.199 27.648,366.045 27.784,368.605 32.821 C 369.488 34.558,369.542 35.722,369.674 55.802 C 369.840 81.258,368.901 78.605,377.747 78.605 C 387.145 78.605,386.185 81.574,385.918 53.326 C 385.653 25.244,385.460 23.888,381.050 19.006 C 377.570 15.154,371.401 13.320,365.706 14.444 M229.395 15.907 C 228.463 16.840,228.641 26.700,229.605 27.501 C 230.182 27.981,232.851 28.197,240.345 28.372 L 250.317 28.605 246.877 33.488 C 225.578 63.731,226.518 62.053,226.514 69.846 C 226.510 77.165,227.179 78.065,231.128 76.064 C 240.755 71.186,254.759 70.813,265.639 75.147 C 270.087 76.918,271.392 77.100,271.811 76.008 C 272.287 74.767,272.123 64.647,271.611 63.690 C 270.386 61.400,262.537 58.786,254.613 58.027 L 248.986 57.488 255.726 47.930 C 259.433 42.673,264.371 35.651,266.698 32.326 L 270.930 26.279 271.089 21.495 C 271.198 18.214,271.071 16.496,270.684 16.029 C 269.925 15.115,230.304 14.998,229.395 15.907 M307.428 27.202 C 313.604 30.396,314.956 57.591,309.296 64.786 C 306.278 68.623,300.348 68.160,297.847 63.893 C 293.908 57.172,293.838 34.517,297.741 29.556 C 300.024 26.654,304.340 25.605,307.428 27.202 M47.816 53.140 C 47.451 62.310,43.833 67.442,37.733 67.442 C 29.210 67.442,28.768 53.144,37.183 49.647 C 38.778 48.984,43.987 48.007,46.221 47.952 L 48.024 47.907 47.816 53.140 M198.505 53.140 C 198.109 62.691,194.321 67.858,188.093 67.341 C 183.971 66.999,181.860 64.277,181.860 59.302 C 181.860 52.235,187.225 48.191,196.919 47.952 L 198.722 47.907 198.505 53.140 M243.256 81.389 C 228.857 83.572,219.241 91.284,232.867 89.721 C 239.505 88.959,250.067 88.951,250.823 89.707 C 251.112 89.996,251.700 90.233,252.129 90.233 C 255.453 90.233,254.387 98.588,249.481 110.993 C 246.496 118.538,247.584 119.927,252.619 115.000 C 259.876 107.900,266.457 88.534,263.140 84.042 C 261.471 81.783,250.399 80.306,243.256 81.389 M66.777 85.382 C 65.908 86.252,65.914 86.189,66.554 87.536 C 66.995 88.465,68.278 89.636,73.844 94.186 C 74.469 94.698,75.378 95.483,75.863 95.930 C 76.348 96.378,76.871 96.744,77.026 96.744 C 77.182 96.744,78.314 97.529,79.543 98.488 C 80.771 99.448,83.151 101.070,84.832 102.093 C 86.512 103.116,87.891 104.227,87.897 104.562 C 87.902 104.897,88.107 105.048,88.351 104.897 C 88.595 104.746,90.741 105.739,93.119 107.103 C 95.496 108.468,98.119 109.859,98.948 110.195 C 99.776 110.531,100.319 111.023,100.155 111.289 C 99.985 111.563,100.081 111.633,100.377 111.450 C 100.664 111.273,101.690 111.529,102.658 112.020 C 105.733 113.580,113.579 116.674,118.146 118.128 C 120.573 118.901,122.977 119.723,123.488 119.956 C 124.000 120.188,126.721 120.842,129.535 121.409 C 132.349 121.976,134.965 122.547,135.349 122.680 C 136.342 123.022,136.653 123.073,144.651 124.221 C 158.125 126.156,179.965 125.596,191.395 123.024 C 192.930 122.678,195.442 122.251,196.977 122.074 C 198.512 121.897,199.872 121.608,200.000 121.432 C 200.260 121.075,204.016 120.062,206.512 119.676 C 207.407 119.538,208.380 119.232,208.673 118.997 C 208.967 118.762,209.681 118.478,210.259 118.367 C 214.875 117.478,232.958 109.228,238.456 105.503 C 239.525 104.779,240.624 104.186,240.898 104.186 C 241.171 104.186,241.395 103.991,241.395 103.752 C 241.395 103.514,241.784 103.195,242.258 103.045 C 243.660 102.600,246.512 99.463,246.512 98.367 C 246.512 96.103,242.980 94.880,240.285 96.210 C 238.420 97.131,232.318 99.484,229.767 100.266 C 228.360 100.697,225.463 101.652,223.328 102.388 C 221.193 103.124,217.635 104.150,215.421 104.668 C 213.207 105.187,210.663 105.808,209.767 106.048 C 207.561 106.641,199.114 108.222,195.116 108.790 C 193.326 109.045,190.500 109.469,188.836 109.733 C 184.407 110.436,166.615 111.237,161.689 110.955 C 159.353 110.821,155.244 110.594,152.558 110.450 C 147.383 110.173,144.247 109.792,134.884 108.299 C 128.517 107.284,125.738 106.752,123.256 106.072 C 122.360 105.827,120.058 105.276,118.140 104.847 C 111.693 103.407,99.606 99.408,92.326 96.306 C 91.814 96.088,90.244 95.449,88.837 94.886 C 86.674 94.020,74.114 87.849,69.535 85.402 C 67.808 84.480,67.681 84.479,66.777 85.382 " stroke="none" fill="#0f0f0f" fill-rule="evenodd"></path></g></svg>`;
|
|
}
|
|
|
|
function renderMiLogo() {
|
|
return html`<svg xmlns="http://www.w3.org/2000/svg" width="55" height="50" xml:space="preserve" viewBox="0 70 300 55" class="remote-logo miLogo"><path style="stroke:none;stroke-width:1;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#000;fill-rule:nonzero;opacity:1" transform="translate(99.01 41.62)" d="M204.546-41.122c1.759 0 3.223 1.417 3.223 3.161v189.386c0 1.715-1.464 3.139-3.223 3.139H163.05c-1.781 0-3.228-1.424-3.228-3.139V-37.961c0-1.743 1.446-3.161 3.228-3.161h41.496zm-180.078 0c31.303 0 64.033 1.435 80.176 17.589 15.871 15.897 17.59 47.549 17.656 78.286v96.671c0 1.715-1.446 3.139-3.219 3.139h-41.49c-1.777 0-3.229-1.424-3.229-3.139V53.09c-.044-17.167-1.031-34.81-9.884-43.692C56.858 1.757 42.639.007 27.853-.356h-75.21c-1.764 0-3.208 1.419-3.208 3.136v148.645c0 1.715-1.462 3.139-3.237 3.139h-41.516c-1.774 0-3.201-1.424-3.201-3.139V-37.961c0-1.743 1.426-3.161 3.201-3.161H24.468zm9.287 75.427c1.766 0 3.201 1.413 3.201 3.143v113.977c0 1.715-1.436 3.139-3.201 3.139H-9.829c-1.792 0-3.228-1.424-3.228-3.139V37.448c0-1.73 1.436-3.143 3.228-3.143h43.584z"></path></svg>`;
|
|
}
|
|
|
|
function renderXiaomiLogo() {
|
|
return html`<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 281 46" width="281" height="46" xml:space="preserve" class="remote-logo xiaomiLogo"><path style="stroke:none;stroke-width:1;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#000;fill-rule:nonzero;opacity:1" transform="translate(.5 .5)" d="M158.12.7c-6.42 0-12.86.81-16.92 4.81s-5.64 10-5.64 17.38S137 36.16 141 40.16s10.66 5 17.08 5 12.86-.86 16.92-4.86 5.67-10 5.67-17.41-1.43-13.24-5.49-17.23S164.55.7 158.12.7zm9.75 32.82c-2.27 2.58-6.37 3-9.75 3s-7.47-.45-9.74-3S146 27.38 146 22.9s.15-7.95 2.41-10.54 5.9-3 9.74-3 7.48.45 9.74 3 2.41 6.05 2.41 10.54-.17 8.03-2.43 10.62zM69.1 1.49H60a.69.69 0 0 0-.7.69v41.49a.69.69 0 0 0 .7.69h9.1a.7.7 0 0 0 .7-.69V2.18a.7.7 0 0 0-.7-.69zM30.87 22.57 47 2.57a.66.66 0 0 0-.52-1.08H34.87a.9.9 0 0 0-.71.35L23.48 16 13.07 1.85a.9.9 0 0 0-.71-.36H.68a.66.66 0 0 0-.52 1.08l16.35 20.37L.14 43.29a.66.66 0 0 0 .52 1.07h11.68a.9.9 0 0 0 .72-.37L24 29.89 34.29 44a.91.91 0 0 0 .72.36h11.53a.66.66 0 0 0 .52-1.07zM252.33 4.64c-3.7-3.44-9.65-3.86-14.46-3.86-6.22 0-10.18 1.32-12.58 2.56h-1.67c-2.35-1.3-6.49-2.56-13-2.56-4.82 0-10.72.35-14.36 3.41-3 2.52-3.71 5.89-3.71 12.79v26.67a.7.7 0 0 0 .71.69h9.09a.7.7 0 0 0 .71-.69V21.7c0-4-.15-8.08.7-9.62.67-1.2 1.71-2.53 6.65-2.53 5.89 0 7.28.41 8.21 3a9.37 9.37 0 0 1 .38 2.56v28.54a.69.69 0 0 0 .7.69h9.09a.7.7 0 0 0 .71-.69V15.13a9.37 9.37 0 0 1 .38-2.56c.93-2.61 2.31-3 8.2-3 4.94 0 6 1.33 6.65 2.53.86 1.54.7 5.66.7 9.62v22a.7.7 0 0 0 .71.69h9.09a.7.7 0 0 0 .7-.69v-25c0-7.28-.23-10.95-3.6-14.08zM121.82 7.18C117.62 1.39 110-.36 102.14.06a56 56 0 0 0-15 2.66c-.88.33-.77 1.09-.78 1.55 0 1.53-.15 5.49-.14 7.1 0 .71.87 1 1.6.78a56.6 56.6 0 0 1 12.62-3c4.67-.38 11 0 12.76 2.65.83 1.26.87 3.19 1 5.16a78.77 78.77 0 0 0-11.51-.4c-3.35.15-9.69.44-13.5 2.44-3.06 1.63-4.86 3.11-5.82 5.87a17 17 0 0 0-.73 7.06c.56 5 2.28 7.43 4.61 9.15 3.67 2.72 8.31 4.15 17.89 3.94 12.75-.28 16.1-4.4 17.79-7.33 2.88-5 2.38-12.85 2.29-17.68-.03-2.01-.33-8.59-3.4-12.83zm-8.31 26.17c-1.2 2.53-5.49 2.92-8 3-4.7.21-8.16 0-10.4-1.08A5.12 5.12 0 0 1 92.4 31c-.08-1.63-.05-2.46.68-3.43 1.66-2.15 6-2.61 10.41-2.78a78.94 78.94 0 0 1 10.94.63c-.03 3.24-.24 6.5-.92 7.93zM280.17 1.49h-9.09a.7.7 0 0 0-.71.69v41.49a.7.7 0 0 0 .71.69h9.09a.7.7 0 0 0 .71-.69V2.18a.7.7 0 0 0-.71-.69z"/></svg>`;
|
|
}
|
|
|
|
// Render Amazon Fire Remote Style AF1
|
|
// TODO: AF1 does not seem to scale properly
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AF1' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body">
|
|
|
|
<div> </div>
|
|
<div class="notch notchtall"> </div>
|
|
<div style="display: inherit;"> ${drawDeviceName(this, this._config, 'top')} </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button keyboard-button" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div class="dpadContainer">
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-u-left-top"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="hamburger-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:rewind"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:fast-forward"></ha-icon>
|
|
</button>
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderAmazonNameWithArrowLogo()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Amazon Fire Remote Style AF2
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AF2' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body">
|
|
|
|
<div> </div>
|
|
<div class="notch notchtall"> </div>
|
|
<div style="display: inherit;"> ${drawDeviceName(this, this._config, 'top')} </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button keyboard-button" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div class="dpadContainer">
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-u-left-top"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="hamburger-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:rewind"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:fast-forward"></ha-icon>
|
|
</button>
|
|
|
|
<div> </div>
|
|
<button class="remote-button" id="tv-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:television-classic"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div class="eightygap"> </div>
|
|
<div> </div>
|
|
<div> </div>
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderAmazonArrowlogo()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Amazon Fire Remote Style AF3
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AF3' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body">
|
|
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div class="notch"> </div>
|
|
<div style="display: inherit;"> ${drawDeviceName(this, this._config, 'top')} </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button keyboard-button" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div class="dpadContainer">
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-u-left-top"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="hamburger-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:rewind"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:fast-forward"></ha-icon>
|
|
</button>
|
|
|
|
<div> </div>
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
+
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
–
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-mute"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderAmazonArrowlogo()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Amazon Fire Remote Style AF4
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AF4' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body">
|
|
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div class="notch"> </div>
|
|
<div style="display: inherit;"> ${drawDeviceName(this, this._config, 'top')} </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button keyboard-button teal" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div class="dpadContainer">
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-u-left-top"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="hamburger-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:rewind"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:fast-forward"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-mute"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
+
|
|
</button>
|
|
<button class="remote-button" id="tv-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:television-classic"></ha-icon>
|
|
</button>
|
|
|
|
|
|
<div> </div>
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
–
|
|
</button>
|
|
<div></div>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 3, appButtonMax["AF4"])}
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderfiretvlogo()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Amazon Fire Remote Style AF5
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AF5' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body">
|
|
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div class="notch"> </div>
|
|
<div style="display: inherit;"> ${drawDeviceName(this, this._config, 'top')} </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button keyboard-button teal" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div class="dpadContainer">
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-u-left-top"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="hamburger-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:rewind"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:fast-forward"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
+
|
|
</button>
|
|
<div> </div>
|
|
<button class="remote-button round-top" id="channel-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu-up"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
–
|
|
</button>
|
|
<button class="remote-button" id="tv-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:television-classic"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-bottom" id="channel-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu-down"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-mute"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="settings-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:cog"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="app-switch-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:file-multiple-outline"></ha-icon>
|
|
</button>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 3, appButtonMax["AF5"])}
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderfiretvlogo()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Amazon Fire Remote Style AF6
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AF6' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body AF6">
|
|
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div class="notch"> </div>
|
|
<button class="remote-button" id="headset-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:headphones"></ha-icon>
|
|
</button>
|
|
|
|
<div> </div>
|
|
<button class="remote-button keyboard-button teal" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div class="dpadContainer">
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-u-left-top"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="hamburger-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:rewind"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:fast-forward"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
+
|
|
</button>
|
|
<button class="remote-button" id="tv-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:television-classic"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-top" id="channel-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu-up"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
–
|
|
</button>
|
|
<button class="remote-button" id="settings-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:cog"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-bottom" id="channel-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu-down"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-mute"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="programmable-one-button" @pointerdown=${this.buttonDown}>
|
|
1
|
|
</button>
|
|
<button class="remote-button" id="programmable-two-button" @pointerdown=${this.buttonDown}>
|
|
2
|
|
</button>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 3, appButtonMax["AF6"])}
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderfiretvlogo()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
// Render Amazon Fire Remote Style AFJTV or AFXF2
|
|
function renderBrandLogo(style) {
|
|
if (style == 'AFJTV') {
|
|
return html`
|
|
<div class="three-col-span jvcbrandlogo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="936" height="372" viewBox="0 0 936 372" stroke="none" stroke-linecap="round" stroke-linejoin="round" fill="#adadad" fill-rule="nonzero"><path d="M421 368h101L638 3h-91l-76 237L396 3h-92zm514-81v-61h-87v61H741V83h107v61h87V67h0c0-8-1-16-2-24-3-21-21-38-42-42-7-1-15-1-22-1H721c-8 0-15 0-22 1-21 4-39 21-42 42-1 8-2 16-2 24v236c0 8 1 16 2 24 3 22 21 38 42 42 7 1 14 1 22 1h148c7 0 15 0 22-1 21-4 39-20 42-42 1-8 2-16 2-24h0zM0 288v-70h86v70h108V3h86v301c0 8-1 15-2 23-3 22-21 39-42 42-7 1-15 1-22 1H66c-8 0-15 0-22-1-21-3-39-20-42-42-1-8-2-15-2-23h0zm0 0"/></svg>
|
|
</div>`;
|
|
}
|
|
if (style == 'AFXF2') {
|
|
return html`
|
|
<div class="three-col-span xf2brandlogo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="969" height="577" viewBox="0 0 969 577" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><path d="M541 1c-19 0-38 3-50 14-13 12-17 30-17 53 0 22 4 39 16 51s32 15 51 15 39-2 51-14 17-30 17-52c0-23-5-40-17-52S560 1 541 1zm29 98c-6 8-19 9-29 9s-22-1-29-9c-7-7-7-18-7-31 0-14 0-24 7-32s18-9 29-9c12 0 23 1 29 9 7 8 8 18 8 32 0 13-1 24-8 31zM275 3h-27c-1 0-2 1-2 1s-1 1-1 2v124l1 1c0 1 1 1 2 1h27c1 0 2-1 2-2V6c0-2-1-3-2-3zM160 67l49-60V5c0-1-1-2-2-2h-35l-2 2-32 42-31-42c0-1-1-2-2-2H70c-1 0-1 1-2 2v2l49 61-49 61v2c1 0 1 1 2 1h35c1 0 2-1 2-1l33-43 31 43s1 1 2 1h34c1 0 2-1 2-1v-2zm663-54C812 3 794 1 780 1c-19 0-31 4-38 8h-5c-7-4-19-8-39-8-14 0-32 1-43 11-9 7-11 17-11 38v80l1 1 1 1h28l1-1c1 0 1-1 1-1V64c0-12-1-24 2-29 2-3 5-7 20-7 17 0 22 1 24 9 1 2 1 5 1 7v86l1 1s1 1 2 1h27l1-1c1 0 1-1 1-1V44c0-2 0-5 1-7 3-8 7-9 25-9 14 0 18 4 19 7 3 5 3 17 3 29v66 1c1 1 1 1 2 1h27c1 0 2-1 2-2V55c0-22-1-33-11-42zm-390 7C420 3 397-2 374-1c-16 1-31 3-45 8-3 1-2 3-3 5v21c0 2 3 3 5 2 12-4 25-7 38-9 14-1 33 0 38 8 2 4 2 10 3 16-12-1-23-2-35-1-10 0-29 1-40 7-9 5-15 9-17 17-3 7-3 14-3 22 2 15 7 22 14 27 11 8 25 12 54 12 38-1 48-13 53-22 9-15 7-39 7-53 0-6-1-26-10-39zm-25 79c-4 7-17 9-24 9-14 0-25 0-31-3-5-3-8-8-8-13-1-5-1-8 2-10 5-7 18-8 31-9 11 0 22 1 32 2 0 10 0 20-2 24zM907 3h-28l-1 1c-1 0-1 1-1 2v124s0 1 1 1c0 1 1 1 1 1h28s1 0 1-1l1-1V6c0-1-1-2-1-2l-1-1z" stroke="none" fill="#000" fill-rule="nonzero"/><path fill="none" d="M4 210h960" stroke-width="9"/><path d="M667 497c6 7-6 38-12 52-1 4 2 6 6 2 24-20 31-63 26-69s-48-12-74 7c-4 2-4 6 1 6 15-2 47-6 53 2m-19 21c-45 34-112 52-169 52-80 0-152-30-206-79-4-4-1-9 4-6 59 34 132 55 207 55 51 0 106-11 158-32 7-4 14 5 6 10m45-70c-1 1-3 0-4 0-1-1-2-3-3-5l-38-97c-1-1-1-2-2-2v-3c0-2 1-3 3-3h13c2 0 4 1 5 1 0 1 1 2 2 5l30 85 30-85c1-3 2-4 3-5 1 0 3-1 4-1h12c2 0 4 1 4 3 0 1-1 2-1 3 0 0-1 1-1 2l-38 97c-1 2-2 4-3 5-2 0-3 1-5 0zm-80 2c-21 0-31-10-31-31v-64h-16c-3 0-4-1-4-4v-6c0-1 0-2 1-3 0 0 2-1 4-1l15-2 3-27c1-3 2-4 5-4h9c3 0 4 1 4 4v26h29c2 0 4 2 4 5v8c0 3-2 4-4 4h-29v63c0 5 1 9 4 11 2 3 6 4 12 4 3 0 6-1 10-1 3-1 4-1 5-1s2 0 2 1c1 0 1 2 1 3v6c0 1 0 3-1 4s-2 2-4 2c-6 2-13 3-19 3m-104-66c0-1 1-3 1-6a32.21 32.21 0 0 0-7-20c-4-4-10-6-18-6-9 0-16 2-21 8-5 5-8 13-9 24zm-21 68c-17 0-31-5-40-15s-14-24-14-43 5-33 14-43 22-16 38-16c14 0 25 4 32 12s11 19 11 33c0 5 0 9-1 14 0 2-1 3-1 4h-4-68c0 13 4 22 9 28 6 6 15 9 28 9 4 0 8 0 12-1 5-1 10-2 15-4h3c1-1 1-1 2-1 2 0 3 2 3 4v6c0 2-1 3-1 4-1 1-2 2-4 3-5 2-10 3-15 4-6 1-12 2-19 2m-120-3c-3 0-4-2-4-5V343c0-3 1-4 4-4h10c1 0 2 0 3 1 1 0 2 1 2 3l1 12c4-4 8-8 11-10 7-5 15-7 23-7h5c3 0 4 2 4 4v12c0 2-1 4-4 4-1 0-2-1-4-1h-4c-11 0-21 4-30 11v76c0 3-1 5-4 5zm-49 0c-3 0-5-2-5-5V343c0-3 2-4 5-4h12c3 0 5 1 5 4v101c0 3-2 5-5 5zm6-130c-4 0-7-1-10-3-2-3-4-6-3-10 0-4 1-7 3-9 3-3 6-4 10-4s8 1 10 4c2 2 3 5 3 9 1 4-1 7-3 10-3 2-6 3-10 3m-80 130c-3 0-5-2-5-5v-88h-16c-3 0-4-2-4-5v-5c0-2 0-3 1-3 1-1 2-2 4-2l15-2v-18c0-24 12-36 35-36 6 0 11 1 18 2 1 1 2 1 3 2s1 3 1 5v6c0 2-1 4-3 4s-4-1-6-1-5-1-8-1c-7 0-11 2-14 4-3 3-4 7-4 13v20h29c3 0 5 1 5 4v8c0 3-2 5-5 5h-29v88c0 3-2 5-4 5z" stroke="none" fill="#000" fill-rule="nonzero"/></svg>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AFJTV' || getDeviceAttribute('defaultRemoteStyle') == 'AFXF2') {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body ${getDeviceAttribute('defaultRemoteStyle')}">
|
|
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div class="notch"> </div>
|
|
<div></div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button keyboard-button" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div class="dpadContainer">
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-u-left-top"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="hamburger-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:rewind"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:fast-forward"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
+
|
|
</button>
|
|
<button class="remote-button" id="tv-button" @pointerdown=${this.buttonDown}>
|
|
GUIDE
|
|
</button>
|
|
<button class="remote-button round-top" id="channel-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu-up"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
–
|
|
</button>
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-mute"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-bottom" id="channel-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu-down"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button digit-pad-button" id="num1-button" @pointerdown=${this.buttonDown}>1</button>
|
|
<button class="remote-button digit-pad-button" id="num2-button" @pointerdown=${this.buttonDown}>2</button>
|
|
<button class="remote-button digit-pad-button" id="num3-button" @pointerdown=${this.buttonDown}>3</button>
|
|
|
|
<button class="remote-button digit-pad-button" id="num4-button" @pointerdown=${this.buttonDown}>4</button>
|
|
<button class="remote-button digit-pad-button" id="num5-button" @pointerdown=${this.buttonDown}>5</button>
|
|
<button class="remote-button digit-pad-button" id="num6-button" @pointerdown=${this.buttonDown}>6</button>
|
|
|
|
<button class="remote-button digit-pad-button" id="num7-button" @pointerdown=${this.buttonDown}>7</button>
|
|
<button class="remote-button digit-pad-button" id="num8-button" @pointerdown=${this.buttonDown}>8</button>
|
|
<button class="remote-button digit-pad-button" id="num9-button" @pointerdown=${this.buttonDown}>9</button>
|
|
|
|
<button class="remote-button digit-pad-button" id="subtitle-button" @pointerdown=${this.buttonDown}>SUBT</button>
|
|
<button class="remote-button digit-pad-button" id="num0-button" @pointerdown=${this.buttonDown}>0</button>
|
|
<button class="remote-button digit-pad-button" id="live-button" @pointerdown=${this.buttonDown}>LIVE</button>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 3, appButtonMax["AFJTV"])}
|
|
|
|
<div class="three-col-span colorButtons">
|
|
<button class="remote-button" id="red-button" @pointerdown=${this.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="560" height="560" viewBox="0 0 560 560" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><circle cx="280" cy="280" fill="red" stroke="none" r="280"/></svg>
|
|
</button>
|
|
<button class="remote-button" id="green-button" @pointerdown=${this.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="560" height="560" viewBox="0 0 560 560" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><circle cx="280" cy="280" fill="green" stroke="none" r="280"/></svg>
|
|
</button>
|
|
<button class="remote-button" id="yellow-button" @pointerdown=${this.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="560" height="560" viewBox="0 0 560 560" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><circle cx="280" cy="280" fill="yellow" stroke="none" r="280"/></svg>
|
|
</button>
|
|
<button class="remote-button" id="blue-button" @pointerdown=${this.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="560" height="560" viewBox="0 0 560 560" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><circle cx="280" cy="280" fill="#1e90ff" stroke="none" r="280"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
${renderBrandLogo(getDeviceAttribute('defaultRemoteStyle'))}
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
function renderHomaticsExtras(remote, style){
|
|
if (style == 'HO1' || style == 'HO2') {
|
|
return
|
|
};
|
|
return html`
|
|
<button class="remote-button digit-pad-button" id="num1-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-1"></ha-icon>
|
|
</button>
|
|
<button class="remote-button digit-pad-button" id="num2-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-2"></ha-icon>
|
|
</button>
|
|
<button class="remote-button digit-pad-button" id="num3-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-3"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button digit-pad-button" id="num4-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-4"></ha-icon>
|
|
</button>
|
|
<button class="remote-button digit-pad-button" id="num5-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-5"></ha-icon>
|
|
</button>
|
|
<button class="remote-button digit-pad-button" id="num6-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-6"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button digit-pad-button" id="num7-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-7"></ha-icon>
|
|
</button>
|
|
<button class="remote-button digit-pad-button" id="num8-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-8"></ha-icon>
|
|
</button>
|
|
<button class="remote-button digit-pad-button" id="num9-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-9"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button digit-pad-button" id="subtitle-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:subtitles-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button digit-pad-button" id="num0-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-0"></ha-icon>
|
|
</button>
|
|
<button class="remote-button digit-pad-button" id="info-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:information-slab-circle-outline"></ha-icon>
|
|
</button>
|
|
|
|
<div class="three-col-span colorButtons">
|
|
<button class="remote-button" id="red-button" @pointerdown=${remote.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="560" height="560" viewBox="0 0 560 560" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><circle cx="280" cy="280" fill="red" stroke="none" r="280"/></svg>
|
|
</button>
|
|
<button class="remote-button" id="green-button" @pointerdown=${remote.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="560" height="560" viewBox="0 0 560 560" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><circle cx="280" cy="280" fill="green" stroke="none" r="280"/></svg>
|
|
</button>
|
|
<button class="remote-button" id="yellow-button" @pointerdown=${remote.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="560" height="560" viewBox="0 0 560 560" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><circle cx="280" cy="280" fill="yellow" stroke="none" r="280"/></svg>
|
|
</button>
|
|
<button class="remote-button" id="blue-button" @pointerdown=${remote.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="560" height="560" viewBox="0 0 560 560" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><circle cx="280" cy="280" fill="#1e90ff" stroke="none" r="280"/></svg>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
}
|
|
|
|
// Render Homatics Remote Style HO1, HO2, HO3, HO4
|
|
if ( ['HO1', 'HO2', 'HO3', 'HO4'].includes(getDeviceAttribute('defaultRemoteStyle'))) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body homatics-remote-body ${getDeviceAttribute('defaultRemoteStyle')}">
|
|
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div class="micNLight">
|
|
<div class="activityLight"> </div>
|
|
<div class="micHole"> </div>
|
|
</div>
|
|
<button class="remote-button" id="input-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:import"></ha-icon>
|
|
</button>
|
|
|
|
${renderHomaticsExtras(this, getDeviceAttribute('defaultRemoteStyle'))}
|
|
|
|
<button class="remote-button" id="bookmark-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:bookmark-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button keyboard-button dark" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="settings-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:cog-outline"></ha-icon>
|
|
</button>
|
|
|
|
<div class="dpadContainer">
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}> </button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}> </button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}> </button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}> </button>
|
|
</div>
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-left"></ha-icon>
|
|
</button>
|
|
<button class="remote-button dark${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="tv-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:television-classic"></ha-icon>
|
|
</button>
|
|
|
|
<div class="volumeChannelSection">
|
|
<div id="volume-up-button-container">
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:plus"></ha-icon>
|
|
</button>
|
|
<svg id="voltext" xmlns="http://www.w3.org/2000/svg" width="128" height="52" viewBox="0 0 128.413 51.545" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><g fill="#000" stroke="none" fill-rule="nonzero"><path d="M38 1h6L25 50h-7L0 1h8l14 40L38 1z"/><use href="#DwyP"/><path d="M129 43v7H95V1h7v42h27z"/><use href="#DwyP"/></g><defs ><path id="DwyP" d="M90 26q0 10-4 17-6 9-18 9-12 0-17-9-5-7-5-17 0-10 5-17 6-9 17-9 12 0 18 9 4 7 4 17zm-6 0q0-8-3-13-5-8-13-8-8 0-12 8-3 5-3 13 0 7 3 13 4 7 12 7 8 0 12-7 4-6 4-13z"/></defs></svg>
|
|
</div>
|
|
<div> </div>
|
|
<div id="channel-up-button-container">
|
|
<button class="remote-button round-top" id="channel-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-up"></ha-icon>
|
|
</button>
|
|
<svg id="chtext" xmlns="http://www.w3.org/2000/svg" width="85" height="52" viewBox="0 0 85.475 51.61" stroke="none" stroke-linecap="round" stroke-linejoin="round" fill="#000" fill-rule="nonzero"><path d="M36 40l4 4q-3 3-7 5-5 3-10 3-13 0-18-9-5-7-5-17Q0 15 5 9q5-9 18-9 5 0 10 2 4 2 7 5l-4 5q-6-7-13-7-9 0-13 8-3 5-3 13 0 8 3 13 4 7 13 7 7 0 13-6zM86 1v49h-7V29H57v21h-7V1h7v21h22V1h7z"/></svg>
|
|
</div>
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:minus"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-mute"></ha-icon>
|
|
</button>
|
|
<svg id="soundeqtext" xmlns="http://www.w3.org/2000/svg" width="317" height="60" viewBox="0 0 316.555 59.605" stroke="none" stroke-linecap="round" stroke-linejoin="round" fill="#000" fill-rule="nonzero"><path d="M34 37q0 7-4 11-5 4-13 4-5 0-9-3-5-2-8-5l4-4q7 6 14 6 4 0 7-2 2-3 2-6 0-3-2-5-2-2-6-3-1-1-5-3-6-2-8-5-4-4-4-9Q2 7 7 3q4-3 12-3 4 0 8 2 4 2 7 5l-4 4q-6-6-13-6-3 0-6 3-2 2-2 5 0 5 8 8 2 1 6 3 5 2 8 5 3 3 3 8zm48-11q0 10-4 17-6 9-18 9-12 0-17-9-5-7-5-17 0-10 5-17 6-9 17-9 12 0 18 9 4 7 4 17zm-6 0q0-8-3-13-5-8-13-8-8 0-12 8-3 5-3 13 0 7 3 13 4 7 12 7 8 0 12-7 4-6 4-13zm49-25v31q0 19-18 19-11 0-16-5-4-4-4-13V1h7v31q0 7 2 10 3 4 11 4 7 0 10-5 2-4 2-11V1h6zm44 0v49h-7l-24-38v3 35h-6V1h7l24 37v-2V1h6zm47 24q0 25-25 25h-15V1h14q15 0 21 7 5 5 5 17zm-7 1q0-10-3-14-4-6-15-6h-8v38h8q10 0 15-5 3-5 3-13zm60 18v6h-33V1h29v6h-22v14h20v6h-20v17h26zm47-18q0 19-15 25 6 3 10 3 2 0 3-1v6q-1 1-3 1-12 0-19-8-11-1-16-10-4-7-4-16 0-10 5-17 6-9 17-9 12 0 18 9 4 7 4 17zm-6 0q0-8-3-13-5-8-13-8-8 0-12 8-3 5-3 13 0 7 3 13 4 7 12 7 8 0 13-7 3-6 3-13z"/></svg>
|
|
<button class="remote-button round-bottom" id="channel-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-down"></ha-icon>
|
|
</button>
|
|
</div>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 3, appButtonMax["ON1"])}
|
|
|
|
<div class="homaticsLogo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="590" height="289" viewBox="0 0 590 289" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd" stroke-width="18"><path d="M99 272H9V157L154 17l143 140M152 277V160l73-73m-21 188h185"/><path d="M247 65l50-48 70 70-70 70v118"/><path d="M439 275l-2-116-73-74m25-23l50-47 140 142v115h-90"/></svg>
|
|
</div>
|
|
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
|
|
// Render NVIDIA Shield Remote Style NS1
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'NS1' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="shield-remote-body ns1-body">
|
|
|
|
<div class="shieldNotch"> </div>
|
|
|
|
<div class="two-col-span"> ${drawDeviceName(this, this._config, 'top')} </div>
|
|
|
|
<div class="dpadContainer shieldDpad">
|
|
<button class="centerbutton centerbuttonShield" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton dpadbuttonShield" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton dpadbuttonShield" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton dpadbuttonShield" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton dpadbuttonShield" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu-left-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:circle-outline"></ha-icon>
|
|
</button>
|
|
|
|
<div class="two-col-span">
|
|
<button class="remote-button keyboard-button" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="ns1-wings">
|
|
<div id="wingL"> </div>
|
|
<div id="ns1spine">
|
|
<button class="ns1volume" id="volume-up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="ns1volume" id="volume-down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
<div id="wingR"> </div>
|
|
</div>
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render NVIDIA Shield Remote Style NS2
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'NS2' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="shield-remote-body">
|
|
|
|
<div class="shieldNotch notchtall"> </div>
|
|
|
|
<div class="two-col-span"> ${drawDeviceName(this, this._config, 'top')} </div>
|
|
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="hamburger-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu"></ha-icon>
|
|
</button>
|
|
|
|
|
|
<div class="dpadContainer shieldDpad">
|
|
<button class="centerbutton centerbuttonShield" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton dpadbuttonShield" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton dpadbuttonShield" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton dpadbuttonShield" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton dpadbuttonShield" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu-left"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:circle"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:fast-forward"></ha-icon>
|
|
</button>
|
|
<button class="remote-button keyboard-button" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-high"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:rewind"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-medium"></ha-icon>
|
|
</button>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 2, appButtonMax["NS2"])}
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render onn. remote style 1
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'ON1' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body ON1">
|
|
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div class="micNLight">
|
|
<div class="activityLight"> </div>
|
|
<div class="micHole"> </div>
|
|
</div>
|
|
<button class="remote-button" id="input-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:import"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="profile-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:account"></ha-icon>
|
|
</button>
|
|
<button class="remote-button keyboard-button dark" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="settings-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:cog"></ha-icon>
|
|
</button>
|
|
|
|
<div class="dpadContainer">
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}> </button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}> </button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}> </button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}> </button>
|
|
</div>
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-left"></ha-icon>
|
|
</button>
|
|
<button class="remote-button dark${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="tv-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:television-classic"></ha-icon>
|
|
</button>
|
|
|
|
<div class="volumeChannelSection">
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:plus"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
<button class="remote-button round-top" id="channel-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-up"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:minus"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-mute"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-bottom" id="channel-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-down"></ha-icon>
|
|
</button>
|
|
</div>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 3, appButtonMax["ON1"])}
|
|
|
|
<div class="onnLogo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1667" height="465" viewBox="0 0 1667 465" stroke="none" stroke-linecap="round" stroke-linejoin="round" fill="#393939" fill-rule="nonzero"><path d="M237 0C106 0 0 104 0 232s106 232 237 232 237-104 237-232S368 0 237 0zm0 325c-50 0-91-42-91-93s41-93 91-93c51 0 92 42 92 93s-41 93-92 93zm711-152v277H801V207v-1-1c-1-37-28-67-62-67h-8c-38 0-70 30-70 68v1 243H514V15h147v36c14-15 31-27 49-36 19-8 39-13 60-13h22c20 0 41 4 60 13 56 26 96 87 96 158zm489 0v277h-147V207v-1-1c-1-37-28-67-62-67h-8c-38 0-70 30-70 68v1 243h-147V15h147v36c14-15 31-27 49-36 19-8 39-13 60-13h22c20 0 41 4 60 13 56 26 96 87 96 158zm44 199c0-50 41-91 93-91 51 0 92 41 92 91s-41 91-92 91c-52 0-93-41-93-91z"/></svg>
|
|
</div>
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render onn. remote style 2
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'ON2' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body ON2">
|
|
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div class="micNLight">
|
|
<div class="activityLight"> </div>
|
|
<div class="micHole"> </div>
|
|
</div>
|
|
<button class="remote-button" id="magic-star-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:star"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button" id="profile-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:account"></ha-icon>
|
|
</button>
|
|
<button class="remote-button keyboard-button light" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="settings-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:cog"></ha-icon>
|
|
</button>
|
|
|
|
<div class="dpadContainer">
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}> </button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}> </button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}> </button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}> </button>
|
|
</div>
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-left"></ha-icon>
|
|
</button>
|
|
<button class="remote-button light${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="tv-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:television-classic"></ha-icon>
|
|
</button>
|
|
|
|
<div class="volumeChannelSection">
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:plus"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
<button class="remote-button round-top" id="channel-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-up"></ha-icon>
|
|
</button>
|
|
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:minus"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-mute"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-bottom" id="channel-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-down"></ha-icon>
|
|
</button>
|
|
</div>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 3, appButtonMax["ON2"])}
|
|
|
|
<div class="onnLogo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1667" height="465" viewBox="0 0 1667 465" stroke="none" stroke-linecap="round" stroke-linejoin="round" fill="#393939" fill-rule="nonzero"><path d="M237 0C106 0 0 104 0 232s106 232 237 232 237-104 237-232S368 0 237 0zm0 325c-50 0-91-42-91-93s41-93 91-93c51 0 92 42 92 93s-41 93-92 93zm711-152v277H801V207v-1-1c-1-37-28-67-62-67h-8c-38 0-70 30-70 68v1 243H514V15h147v36c14-15 31-27 49-36 19-8 39-13 60-13h22c20 0 41 4 60 13 56 26 96 87 96 158zm489 0v277h-147V207v-1-1c-1-37-28-67-62-67h-8c-38 0-70 30-70 68v1 243h-147V15h147v36c14-15 31-27 49-36 19-8 39-13 60-13h22c20 0 41 4 60 13 56 26 96 87 96 158zm44 199c0-50 41-91 93-91 51 0 92 41 92 91s-41 91-92 91c-52 0-93-41-93-91z"/></svg>
|
|
</div>
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
function renderRokuPowerRow(remote, style){
|
|
if(style=='RVR') {
|
|
return html`
|
|
<div class="powerRow">
|
|
<div class="micRow"> </div>
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
</div>`;
|
|
}
|
|
else {
|
|
return html`
|
|
<div class="powerRow">
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
function renderRokuDPad(remote) {
|
|
return html`
|
|
<div class="rokuDPadContainer">
|
|
<div> </div>
|
|
<button id="up-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-up"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
<button id="left-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-left"></ha-icon>
|
|
</button>
|
|
<button id="center-button" @pointerdown=${remote.buttonDown}>
|
|
<div class="okCircle">
|
|
OK
|
|
</div>
|
|
</button>
|
|
<button id="right-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-right"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
<button id="down-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-down"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
</div>`;
|
|
}
|
|
|
|
function renderRokuBackHomeRow(remote) {
|
|
return html`
|
|
<div class="backHomeRow">
|
|
<button class="remote-button" id="back-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-left"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:home-outline"></ha-icon>
|
|
</button>
|
|
</div>`;
|
|
}
|
|
|
|
function renderRokuReplayOptionsRow(remote, style) {
|
|
var middleButton = html `<button class="remote-button" id="keyboard-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>`;
|
|
if (style=='RHR'|| style=='RWR') {
|
|
var middleButton = html `<button class="remote-button" id="sleep-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:moon-waxing-crescent"></ha-icon>
|
|
</button>`;
|
|
}
|
|
if (style=='RSR' || style=='RTR') { middleButton = '' };
|
|
return html`
|
|
<div class="replayVoiceOptionsRow">
|
|
<button class="remote-button" id="replay-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:restore"></ha-icon>
|
|
</button>
|
|
${middleButton}
|
|
<button class="remote-button" id="options-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:asterisk"></ha-icon>
|
|
</button>
|
|
</div>`;
|
|
}
|
|
|
|
function renderRokuScrubRow(remote) {
|
|
return html`
|
|
<div class="scrubRow">
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:rewind"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${remote.buttonDown}>
|
|
<ha-icon icon="mdi:fast-forward"></ha-icon>
|
|
</button>
|
|
</div>`;
|
|
}
|
|
|
|
function renderRokuTag() {
|
|
return html`<div class="rokuTag">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="954" height="298" viewBox="0 0 954 298" stroke="none" stroke-linecap="round" stroke-linejoin="round" fill="#adadad" fill-rule="nonzero"><path d="M259.3 291.2h-88l-70-97H77.7v97H0V0h111.2c64 0 116.5 43.6 116.5 97.3 0 32.7-20 62-50.6 79.8l82.2 114.2M150 97.2c.1-13-5-25.3-14-34.5-9-9-21.5-14.3-34.4-14.4h-24v97.4h24c26.7-.1 48.3-21.8 48.4-48.5z"/><path d="M466.4 177a119 119 0 0 1-203.3 85.2c-34.2-34-44.6-85.3-26.2-130A119 119 0 0 1 431.3 93a119 119 0 0 1 35.1 84.1M347 114.7c-20.6 0-38 28-38 62.4 0 34.5 17.4 62.4 38 62.4 21 0 38.4-28 38.4-62.4S368 114.7 347 114.7zm301.6-51.5l-89.4 89.5V63h-77.7v228h77.7v-92.5l93.4 92.5h97.6L631.6 172.3 730 74v135.5c0 45 27 86.3 95 86.3a108 108 0 0 0 76.3-34.8l35 30h16.5V63h-77.5v147.6c-8.7 15.3-21 25-39.7 25-19.2 0-28-11.4-28-47.6V63z"/></svg></div>`;
|
|
}
|
|
|
|
// Render Roku Hisense Remote
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'RHR' ) {
|
|
return html`
|
|
<ha-card>
|
|
${cssVars}
|
|
<div class="roku-remote-body RHR">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
${renderRokuPowerRow(this, 'RHR')}
|
|
${renderRokuBackHomeRow(this)}
|
|
${renderRokuDPad(this)}
|
|
${renderRokuReplayOptionsRow(this, "RHR")}
|
|
${renderRokuScrubRow(this)}
|
|
${drawAppLaunchButtons(this, this._config, 'fill', appButtonMax["RHR"])}
|
|
<div class="rokuBrandLogo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1736" height="144" viewBox="0 0 1736 144" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><g fill="#b9b9b9" stroke="none"><path d="M1226 85c0 23-14 44-35 53-22 9-47 4-63-12-17-16-22-41-13-62 9-22 30-36 53-36 16 0 31 6 41 17 11 10 17 25 17 40m-58-30c-10 0-18 14-18 30 0 17 8 30 18 30s19-13 19-30c0-16-9-30-19-30zm145-25l-43 43V30h-37v110h37V95l45 45h47l-57-57 47-48v65c0 22 13 42 46 42 16 0 30-9 37-17l17 15h8V30h-38v71c-4 7-10 12-19 12s-13-5-13-23V30z" fill-rule="nonzero"/><path d="M1484 32h41v106h32V32h41V3l54 136h29l54-137h-35l-33 90-34-90h-149M917 71c0-11 9-20 20-20s20 9 20 20-9 20-20 20-20-9-20-20z"/><g fill-rule="nonzero"><path d="M1126 140h-43l-33-47h-12v47h-37V0h53c31 0 57 21 57 47 0 16-10 30-25 38l40 55m-53-93c0-6-2-12-7-17-4-4-10-7-16-7h-12v47h12c13 0 23-10 23-23zM158 1l-11 137h-43l5-61H48l-5 61H0L11 1h31c4 0 11 0 11 9l-3 39h61l4-48zm545 78c19 8 39 17 36 35-3 21-33 25-58 25-2 0-4-1-6-1-33-1-50-3-50-3l1-22s24 4 46 5c12 0 21-1 21-5 1-4-6-6-19-11l-11-5c-14-6-37-14-36-33s24-25 37-27c8-1 16-1 28-1 25 0 46 5 46 5l-2 21s-22-5-45-5c-14 0-19 1-20 4-1 4 7 7 17 12l15 6M210 1c7 0 9 3 9 9 0 2-2 17-2 17h-42l2-26h33m7 37l-8 100h-42l8-100z"/><path d="M574 72c0-14-10-14-14-14-11 0-25 2-25 2l-5 78h-39l6-96s31-4 55-5h9c10 0 17 1 18 1 15 1 36 3 34 33l-4 67h-40l5-66"/><use xlink:href="#oug9"/><use xlink:href="#oug9" x="-395"/><path d="M307 79l-15-7c-10-4-18-7-17-11 1-3 6-4 20-4 23 0 45 5 45 5l2-21s-21-5-46-5c-12 0-20 0-28 1-13 2-36 8-37 27s22 28 36 33l11 5c13 5 20 7 19 11 0 4-9 5-21 5-22-1-46-5-46-5l-1 22s17 2 50 3h6c25 0 55-3 58-24 3-19-17-27-36-35"/></g></g><defs ><path id="oug9" d="M874 96c8-48-34-58-44-59-4-1-8-1-12-1-45 0-67 28-69 51-2 21 6 52 72 52 24 0 39-3 46-5 1-5 2-14 3-21-3 1-23 5-44 5h-2c-30-1-36-15-36-22v-1zm-84-19c2-11 10-22 27-22 25 1 23 22 23 22z"/></defs></svg>
|
|
</div>
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
// Render Roku Simple Remote
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'RSR' ) {
|
|
return html`
|
|
<ha-card>
|
|
${cssVars}
|
|
<div class="roku-remote-body RSR">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
${renderRokuBackHomeRow(this)}
|
|
${renderRokuDPad(this)}
|
|
${renderRokuReplayOptionsRow(this, 'RSR')}
|
|
${renderRokuScrubRow(this)}
|
|
${drawAppLaunchButtons(this, this._config, 'fill', appButtonMax["RSR"])}
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderRokuTag()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
// Render Roku TCL Remote
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'RTR' ) {
|
|
return html`
|
|
<ha-card>
|
|
${cssVars}
|
|
<div class="roku-remote-body RTR">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
${renderRokuPowerRow(this, 'RTR')}
|
|
${renderRokuBackHomeRow(this)}
|
|
${renderRokuDPad(this)}
|
|
${renderRokuReplayOptionsRow(this, "RTR")}
|
|
${renderRokuScrubRow(this)}
|
|
${drawAppLaunchButtons(this, this._config, 1, appButtonMax["RTR"])}
|
|
<div class="rokuBrandLogo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1324" height="145" viewBox="0 0 1324 145" stroke="none" stroke-linecap="round" stroke-linejoin="round" fill="#b9b9b9" fill-rule="evenodd"><path d="M0 45h52v93h47V45h52V7H0v38zm242 66c-10 0-18-3-25-9-7-7-12-16-12-29v-2c0-13 5-23 12-29 7-7 15-10 25-10 26 0 31 15 33 25h41c-1-20-10-34-24-43-13-9-28-14-49-14-25 0-43 6-58 18-15 13-23 33-23 53v1c0 22 7 39 22 53 14 13 35 19 58 18 21 0 39-4 51-14 13-10 22-24 23-43h-41c-1 8-6 25-33 25m144-9V7h-45v131h118v-36h-73z" fill-rule="nonzero"/><path d="M1072 32h41v106h32V32h41V3l54 136h29l54-137h-35l-33 90-34-90h-149"/><g fill-rule="nonzero"><path d="M714 140h-43l-33-47h-12v47h-37V0h53c31 0 57 21 57 47 0 16-10 30-25 38l40 55m-53-93c0-6-2-12-7-17-4-4-10-7-16-7h-12v47h12c13 0 23-10 23-23z"/><path d="M814 85c0 23-14 44-35 53-22 9-47 4-63-12-17-16-22-41-13-62 9-22 30-36 53-36 16 0 31 6 41 17 11 10 17 25 17 40m-58-30c-10 0-18 14-18 30 0 17 8 30 18 30s19-13 19-30c0-16-9-30-19-30zm145-25l-43 43V30h-37v110h37V95l45 45h47l-57-57 47-48v65c0 22 13 42 46 42 16 0 30-9 37-17l17 15h8V30h-38v71c-4 7-10 12-19 12s-13-5-13-23V30z"/></g><path d="M505 71c0-11 9-20 20-20s20 9 20 20-9 20-20 20-20-9-20-20z"/></svg>
|
|
</div>
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
// Render Roku Westinghouse Remote
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'RWR' ) {
|
|
return html`
|
|
<ha-card>
|
|
${cssVars}
|
|
<div class="roku-remote-body RWR">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
${renderRokuPowerRow(this, 'RWR')}
|
|
${renderRokuBackHomeRow(this)}
|
|
${renderRokuDPad(this)}
|
|
${renderRokuReplayOptionsRow(this, "RWR")}
|
|
${renderRokuScrubRow(this)}
|
|
${drawAppLaunchButtons(this, this._config, 'fill', appButtonMax["RWR"])}
|
|
<div class="rokuBrandLogo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="996" height="448" viewBox="0 0 996 448" stroke="none" stroke-linecap="round" stroke-linejoin="round" fill="#b9b9b9" fill-rule="evenodd"><path d="M643 320h47v122h37V320h46v-33l62 156h33l62-157h-40l-38 103-39-103H643"/><g fill-rule="nonzero"><path d="M233 443h-49l-38-54h-14v54H90V283h61c35 0 65 24 65 54 0 18-12 34-29 43l46 63m-61-106c0-7-2-14-8-20-4-4-11-8-18-8h-14v54h14c15 0 26-11 26-26z"/><path d="M347 380c0 27-16 51-40 61-25 10-54 4-72-14-20-18-25-47-15-71 10-25 34-41 61-41 17 0 34 7 47 19 12 12 19 29 19 46m-66-34c-12 0-21 16-21 34 0 20 9 35 21 35 11 0 21-15 21-35 0-18-10-34-21-34zm166-29l-50 49v-49h-42v126h42v-51l52 51h54l-66-65 54-55v74c0 26 15 48 53 48 18 0 34-10 42-19l20 17h9V317h-44v82c-4 8-11 13-21 13-11 0-15-5-15-26v-69z"/></g><path d="M484 247c0-13 10-23 23-23s23 10 23 23-10 23-23 23-23-10-23-23z"/><path d="M374 1c6-2 13 0 16 5 3 6 1 13-4 16-7 4-16 2-19-5-3-6 1-14 7-16zM0 2h25c4 32 9 63 14 95L56 2h26l17 95 15-95h24l-25 151H89L69 48 50 153H26L0 2zm582 151V2h23v43c3-5 7-9 13-11s13-2 19 0c7 3 12 9 15 15 2 5 2 9 2 14v90h-22V68c0-5-1-10-4-13-4-4-10-3-15-2-5 2-8 8-8 13v87h-23zM317 14h20c1 7 0 14 1 21h17v20h-17v68c0 4 1 8 2 12 1 6 4 13 9 18h-24c-2-3-4-6-5-10-2-5-4-10-3-15-1-24 0-49 0-73h-52c-5 0-10 2-13 6-2 5-2 11 2 15 2 3 5 6 9 8 7 4 14 7 21 11 6 3 11 8 14 13 3 7 3 14 3 21-1 7-5 14-11 19-8 6-19 7-28 7-14-1-26-9-32-21-3-7-4-14-4-21h22c0 6 1 12 5 17s11 7 18 5c4-2 7-7 7-12s-4-9-9-12l-22-13c-5-4-10-8-14-13-4-7-5-15-4-23s6-16 13-20c7-5 16-7 25-7h50V14zm235 34c-1-7 3-14 10-15s14 5 14 12c-1 7-7 12-14 11-3-1-5-2-7-4 2 7 3 14 3 22s0 16-2 24c-1 6-4 12-9 17-5 4-12 6-19 7s-15 0-22-3v16h35c6 0 12 0 18 3 5 2 8 6 10 10 3 6 4 13 3 19s-4 12-9 16c-6 5-14 6-21 6h-31c-7-1-14-1-18-6-5-5-4-12-4-19 2-6 9-10 15-10-6-1-11-4-14-9-2-6-2-13 2-19 3-4 8-7 13-8-5-3-10-8-12-13-3-8-4-17-4-25s0-17 2-25c2-6 5-11 9-14 5-4 12-6 18-6 8-1 15-1 22 2 5 2 9 6 12 11m-32 5a10.85 10.85 0 0 0-8 8c-3 6-2 14-2 21 0 6 0 12 3 17 4 7 15 8 19 2 3-4 4-9 5-13 1-7 1-14 0-20-1-5-2-9-5-12-3-4-8-4-12-3m-14 100v18h36c3 0 6 0 9-1 5-3 6-11 1-14-3-2-7-3-10-3h-36zM168 34c12-2 24-1 34 6 9 7 12 19 13 30v27h-51v20c0 4 1 9 5 13 3 3 8 4 12 4 4-1 7-3 9-6 2-5 2-11 2-16h23c0 6 0 12-2 19-2 9-8 17-17 21s-21 4-31 2c-9-2-17-10-20-19-6-16-5-34-5-52 0-11 0-24 6-34 4-9 13-14 22-15m-2 24c-3 6-3 13-3 20h29c0-7 0-15-4-21-4-8-18-7-22 1zm274-24c7-2 14-2 20 2 9 4 14 13 15 22 1 5 1 10 1 16v79h-22V71c0-6-2-12-7-16-4-3-10-2-14 1s-6 9-6 15v82h-22V35h21v10c3-5 8-9 14-11zm257 0c11-2 24 0 32 9 7 6 10 16 10 25v53c0 7-1 14-5 20-3 5-8 9-13 11-8 3-15 4-23 3s-15-4-21-10c-5-5-8-13-8-21V72c0-8 1-16 5-23 5-9 14-14 23-15m3 20c-5 1-8 5-9 10-2 7-1 14-1 21v32c0 5 1 11 6 15 4 3 11 3 16 0s6-9 6-15V71c0-5-1-10-4-14-4-4-9-4-14-3zm141-3c5-11 17-17 28-18 9-1 19 2 26 8 8 8 12 19 12 30h-22c0-6-2-13-7-16-6-4-16-1-18 6-1 3-1 6 1 9s5 6 9 8c7 4 13 8 20 12 6 4 12 9 15 16 3 5 4 12 4 18 0 8-3 16-9 22-7 7-17 9-27 9-9 1-18-2-25-9-9-8-13-21-13-34h21c0 6 2 12 6 16 3 5 9 7 15 6s10-7 9-13c-1-5-5-9-9-12-8-5-16-9-23-14-4-2-6-4-9-7-8-10-9-26-4-37zm97-14c7-3 16-4 23-4 8 0 16 3 22 8 8 8 11 19 12 30v26h-51v21c1 4 2 9 5 12s8 4 12 4c4-1 7-3 9-6 2-5 2-11 2-16h23c0 6 0 12-1 17-2 8-6 14-12 19s-15 7-23 7c-10 0-21-2-28-10-4-5-7-12-8-18-4-17-3-35-3-53 0-8 1-17 5-25 3-5 8-9 13-12m8 21c-3 6-3 13-3 20h29c0-7 0-15-4-21-4-8-18-7-22 1zM368 36h22v117h-22V36zm385-1h22v83c0 4 0 9 3 13 3 3 7 4 12 4 4-1 8-4 9-8 3-6 3-13 3-19V35h21v118h-21v-10c-3 4-7 7-11 9-7 3-15 4-21 2s-10-6-12-11c-4-8-5-17-5-25V35z" fill-rule="nonzero"/></svg>
|
|
</div>
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
// Render Roku Voice Remote
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'RVR' ) {
|
|
return html`
|
|
<ha-card>
|
|
${cssVars}
|
|
<div class="roku-remote-body RVR">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
${renderRokuPowerRow(this, 'RVR')}
|
|
${renderRokuBackHomeRow(this)}
|
|
${renderRokuDPad(this)}
|
|
${renderRokuReplayOptionsRow(this)}
|
|
${renderRokuScrubRow(this)}
|
|
|
|
${drawAppLaunchButtons(this, this._config, 'fill', appButtonMax["RVR"])}
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderRokuTag()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
// Render Roku Voice Remote Pro
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'RVRP' ) {
|
|
return html`
|
|
<ha-card>
|
|
${cssVars}
|
|
<div class="roku-remote-body RVRP">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
${renderRokuPowerRow(this)}
|
|
<div class="micRow"> </div>
|
|
${renderRokuBackHomeRow(this)}
|
|
${renderRokuDPad(this)}
|
|
${renderRokuReplayOptionsRow(this)}
|
|
${renderRokuScrubRow(this)}
|
|
<div class="personalShortcutsRow">
|
|
<button class="remote-button" id="programmable-one-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-1"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="programmable-two-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:numeric-2"></ha-icon>
|
|
</button>
|
|
</div>
|
|
${drawAppLaunchButtons(this, this._config, 'fill', appButtonMax["RVRP"])}
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderRokuTag()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Xiaomi Remote 1
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'XM1' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body XM2">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<div> </div>
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button keyboard-button" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div class="dpadContainer">
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="remote-button${patchWallStatusClass}" id="patchwall-button" @pointerdown=${this.buttonDown}>
|
|
<div class="mdiSubstituteIconWrapper">
|
|
<svg class="mdiSubstitueIcon" xmlns="http://www.w3.org/2000/svg" width="850" height="850" viewBox="0 0 850 850" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><path d="M81.6 57.8C73.5 57.6 66 67.6 66 75l-.5 391.5c0 9.5 11 19.5 18.8 20.7-.3-.2 444.2.3 444.2.3 11-1.3 22.5-10 22.5-17.5l.5-395c0-9-4-18-19-18 .5-.4-447 .3-451.5.5m572.5-.5c-13.3 0-25 9-25 20v292c0 12 8 16 16 16h124c9 0 15-4 15-16V77c-1-10-8-20-20-20h-111m-.8 408c-23.2.2-20.7 2.7-20.7 55.2 0 55 2.5 50-25 50H473.5c-20 0-27.5 5-27.5 20v190c.5 12 12.5 20 38.6 19.7-1 .3 259 .3 259 .3 32.5 0 40-5 40-20v-297c0-13-5-18-22.5-18.5l-109.3.3M84 569.2c-14 0-18 6-18 18.5v192.5c5 30-7.5 20 270 20 20 0 30.5-7 30.5-19v-194c0-11-11-18-31-18h-258" stroke="none"/></svg>
|
|
</div>
|
|
</button>
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-left"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:checkbox-blank-circle-outline"></ha-icon>
|
|
</button>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 3, appButtonMax["XM1"])}
|
|
|
|
<div> </div>
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
+
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
–
|
|
</button>
|
|
<div> </div>
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderXiaomiLogo()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Xiaomi Mi Remote
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'XM2' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="remote-body XM2">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<div> </div>
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button keyboard-button" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div class="dpadContainer">
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="remote-button" id="apps-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:apps"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-left"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:checkbox-blank-circle-outline"></ha-icon>
|
|
</button>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 3, appButtonMax["XM2"])}
|
|
|
|
<div> </div>
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
+
|
|
</button>
|
|
<div> </div>
|
|
|
|
<div> </div>
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
–
|
|
</button>
|
|
<div> </div>
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${renderMiLogo()}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Chromecast 1, 2, or 3
|
|
if ( ['CC1', 'CC2', 'CC3'].includes(getDeviceAttribute('defaultRemoteStyle'))) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="chromecast-remote-body ${getDeviceAttribute('defaultRemoteStyle')}">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<div class="dpadContainer">
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}> </button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-left"></ha-icon>
|
|
</button>
|
|
<button class="remote-button keyboard-button" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
|
|
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-mute"></ha-icon>
|
|
</button>
|
|
|
|
${drawMediaControlButtons(this, this._config)}
|
|
|
|
|
|
${drawAppLaunchButtons(this, this._config, 2, appButtonMax[getDeviceAttribute('defaultRemoteStyle')])}
|
|
|
|
<div class="chromecastBottomIndentedRow">
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<div class="notch"> </div>
|
|
<button class="remote-button" id="input-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:import"></ha-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="chromecastVolumeRocker">
|
|
<button class="remote-button" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-minus"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-plus"></ha-icon>
|
|
</button>
|
|
</div>
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Apple TV Remote - Style 1
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AR1' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="apple-remote-body AR1">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<div class="dpadContainer AR1Dpad">
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}></button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
MENU
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 2, appButtonMax["AR1"])}
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Apple TV Remote - Style 2
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AR2' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="apple-remote-body AR2">
|
|
<div class="AR2TopSection">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<div class="two-col-span apple-tv-top">
|
|
<div></div>
|
|
<div class="notch"></div>
|
|
<div></div>
|
|
</div>
|
|
|
|
<div class="dpadContainer">
|
|
<button class="centerbutton" id="center-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:checkbox-blank-circle"></ha-icon>
|
|
</button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-top-left"></ha-icon>
|
|
</button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-top-right"></ha-icon>
|
|
</button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-bottom-left"></ha-icon>
|
|
</button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-bottom-right"></ha-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
MENU
|
|
</button>
|
|
<button class="remote-button" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:monitor"></ha-icon>
|
|
</button>
|
|
|
|
</div>
|
|
<div class="AR2BottomSection">
|
|
|
|
<button class="remote-button" id="search-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:magnify"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
+
|
|
</button>
|
|
|
|
|
|
<button class="remote-button" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
–
|
|
</button>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 2, appButtonMax["AR2"])}
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render Apple TV Remote - Style 3
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AR3' ) {
|
|
return html`
|
|
<ha-card>
|
|
|
|
${cssVars}
|
|
|
|
<div class="apple-remote-body AR3">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
|
|
<div class="two-col-span apple-tv-top">
|
|
<div></div>
|
|
<div class="notch"></div>
|
|
<div class="right">
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dpadContainer">
|
|
<button class="centerbutton type-button" id="center-button" @pointerdown=${this.buttonDown}></button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${this.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${this.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:chevron-left"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:monitor"></ha-icon>
|
|
</button>
|
|
|
|
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
+
|
|
</button>
|
|
|
|
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-off"></ha-icon>
|
|
</button>
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
–
|
|
</button>
|
|
|
|
${drawAppLaunchButtons(this, this._config, 2, appButtonMax["AR3"])}
|
|
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render App Launcher 1
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AL1' ) {
|
|
return html`
|
|
<ha-card>
|
|
${cssVars}
|
|
<div class="remote-body AL1">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
${drawAppLaunchButtons(this, this._config, 'fill', appButtonMax["AL1"])}
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
// Render App Launcher 2
|
|
if ( getDeviceAttribute('defaultRemoteStyle') == 'AL2' ) {
|
|
var lpb4icon = 'mdi:rewind';
|
|
var lpb6icon = 'mdi:fast-forward';
|
|
var rpb2icon = 'mdi:restart';
|
|
var rpb2id = 'reboot-button';
|
|
var hiddenclass = '';
|
|
if(this._config.device_family == 'apple-tv') {
|
|
var lpb4icon = 'mdi:skip-backward';
|
|
var lpb6icon = 'mdi:skip-forward';
|
|
var rpb2icon = 'mdi:magnify';
|
|
var rpb2id = 'search-button';
|
|
var hiddenclass = 'hidden';
|
|
}
|
|
|
|
// conditionally hide the app launcher section if no apps are selected
|
|
var configuredAppLaunchButtons = 0;
|
|
for(let i=1; i<=appmap.size; i++) {
|
|
if(this._config["app_launch_"+i] && this._config["app_launch_"+i] != '') {
|
|
configuredAppLaunchButtons++;
|
|
}
|
|
}
|
|
var noAppsClass = '';
|
|
if (configuredAppLaunchButtons==0){
|
|
noAppsClass = 'noApps';
|
|
}
|
|
|
|
// conditionally hide the button frame sections and their backgrounds
|
|
var rowClass = "row";
|
|
if(this._config.hide_button_group_frame == true) {
|
|
rowClass="row noframes";
|
|
}
|
|
|
|
// allow the dpad style to change for AL2 remotes
|
|
function getDpad(caller, style='amazon-fire') {
|
|
var dpadClass = '';
|
|
switch(style) {
|
|
case 'apple-tv-black':
|
|
dpadClass = 'AR3 ';
|
|
break;
|
|
case 'apple-tv-silver':
|
|
dpadClass = 'AR1 ';
|
|
break;
|
|
case 'chromecast':
|
|
dpadClass = 'CC ';
|
|
break;
|
|
case 'xiaomi':
|
|
dpadClass = 'XM ';
|
|
break;
|
|
case 'minimal':
|
|
dpadClass = "minimal ";
|
|
break;
|
|
}
|
|
if(style=='minimal'){
|
|
return html`
|
|
|
|
<div class="${dpadClass}dpadContainer">
|
|
<div> </div>
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${caller.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="57" height="19" viewBox="0 0 57 19" stroke="#b3b3b3" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><path fill="none" d="M3 15Q23 3 28 3q5 0 25 12" stroke-width="6"/></svg>
|
|
</button>
|
|
<div> </div>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${caller.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="57" viewBox="0 0 19 57" stroke="#b3b3b3" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><path fill="none" d="M15 53Q3 33 3 28q0-5 12-25" stroke-width="6"/></svg>
|
|
</button>
|
|
<button class="centerbutton" id="center-button" @pointerdown=${caller.buttonDown}> </button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${caller.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="57" viewBox="0 0 19 57" stroke="#b3b3b3" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><path fill="none" d="M3 3q12 20 12 25 0 5-12 25" stroke-width="6"/></svg>
|
|
</button>
|
|
<div> </div>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${caller.buttonDown}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="57" height="19" viewBox="0 0 57 19" stroke="#b3b3b3" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><path fill="none" d="M53 3Q33 15 28 15 23 15 3 3" stroke-width="6"/></svg>
|
|
</button>
|
|
<div> </div>
|
|
</div>
|
|
|
|
`;
|
|
}
|
|
else {
|
|
return html`
|
|
<div class="${dpadClass}dpadContainer">
|
|
<button class="centerbutton" id="center-button" @pointerdown=${caller.buttonDown}> </button>
|
|
<div class="directionButtonContainer">
|
|
<button class="dpadbutton" id="up-button" @pointerdown=${caller.buttonDown}></button>
|
|
<button class="dpadbutton" id="right-button" @pointerdown=${caller.buttonDown}></button>
|
|
<button class="dpadbutton" id="left-button" @pointerdown=${caller.buttonDown}></button>
|
|
<button class="dpadbutton" id="down-button" @pointerdown=${caller.buttonDown}></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
return html`
|
|
<ha-card>
|
|
${cssVars}
|
|
<div class="remote-body AL2">
|
|
${drawDeviceName(this, this._config, 'top')}
|
|
${drawAppLaunchButtons(this, this._config, 'fill', appButtonMax["AL2"])}
|
|
|
|
<div class="ALControlsContainer ${noAppsClass}">
|
|
|
|
<div class="left-pocket-controls">
|
|
<div class="${rowClass}">
|
|
<button class="remote-button${powerStatusClass}" id="power-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:power"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="back-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:arrow-left"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${homeStatusClass}" id="home-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:home-outline"></ha-icon>
|
|
</button>
|
|
</div>
|
|
<div class="${rowClass}">
|
|
<button class="remote-button" id="rewind-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="${lpb4icon}"></ha-icon>
|
|
</button>
|
|
<button class="remote-button${playingStatusClass}" id="playpause-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:play-pause"></ha-icon>
|
|
</button>
|
|
<button class="remote-button" id="fastforward-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="${lpb6icon}"></ha-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="center-pocket-controls">
|
|
${getDpad(this, this._config.dpad_style)}
|
|
</div>
|
|
|
|
<div class="right-pocket-controls">
|
|
<div class="${rowClass}">
|
|
<div class="volumeContainer">
|
|
<button class="remote-button round-top" id="volume-up-button" @pointerdown=${this.buttonDown}>
|
|
+
|
|
</button>
|
|
<button class="remote-button round-bottom" id="volume-down-button" @pointerdown=${this.buttonDown}>
|
|
–
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button class="remote-button" id="${rpb2id}" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="${rpb2icon}"></ha-icon>
|
|
</button>
|
|
<br>
|
|
<button class="remote-button" id="mute-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:volume-mute"></ha-icon>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button class="remote-button keyboard-button ${hiddenclass}" id="keyboard-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:keyboard-outline"></ha-icon>
|
|
</button>
|
|
<br>
|
|
<button class="remote-button ${hiddenclass}" id="hamburger-button" @pointerdown=${this.buttonDown}>
|
|
<ha-icon icon="mdi:menu"></ha-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
${drawDeviceName(this, this._config, 'bottom')}
|
|
${drawFiremoteVersionNumber(this, this._config)}
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// Firemote Button Click or Click + Hold Handler
|
|
buttonDown(clicked) {
|
|
|
|
// Ignore right clicks
|
|
if (clicked.which === 3) {
|
|
return;
|
|
}
|
|
|
|
// Inspect user prefs & setup click timer
|
|
const _config = this._config;
|
|
const _hass = this.hass;
|
|
const deviceType = this._config.device_type;
|
|
const deviceFamily = this._config.device_family;
|
|
const entity = this._config.entity;
|
|
const compatibility_mode = this._config.compatibility_mode || 'default';
|
|
const overrides = this._config.button_overrides;
|
|
const atvRemoteEntity = this._config.android_tv_remote_entity;
|
|
const rokuRemoteEntity = this._config.roku_remote_entity;
|
|
const activityLight = this.renderRoot.querySelector('.activityLight');
|
|
const start = Date.now();
|
|
const holdTime = 500;
|
|
const buttonID = clicked.target.id;
|
|
var pressedTarget = clicked.target;
|
|
var timer = null;
|
|
|
|
// Rebuild AppMap - allow hdmi inputs where appropriate & add configured custom launchers from YAML
|
|
refreshAppMap(this._config, 4, 1, true);
|
|
|
|
|
|
// Function for buttons that need overrides because HA integration support is lacking
|
|
function unsupportedButton(){
|
|
alert('"'+buttonID+"\"\n\nUse a button override to program this button\nhttps://github.com/PRProd/HA-Firemote/#button-overrides");
|
|
return;
|
|
}
|
|
|
|
// Check for user set Associated Android TV Remote Integration entity
|
|
var hasATVAssociation = true;
|
|
if(atvRemoteEntity == '' || typeof atvRemoteEntity == 'undefined' || deviceFamily == 'amazon-fire' ) {
|
|
hasATVAssociation = false;
|
|
}
|
|
|
|
// Choose event listener path for client android device
|
|
var eventListenerBinPath = '';
|
|
if(compatibility_mode == 'default' || compatibility_mode == 'strong' || compatibility_mode == '') {
|
|
eventListenerBinPath = deviceAttributeQuery("defaultEventListenerBinPath", this._config);
|
|
}
|
|
else {
|
|
var eventListenerBinPath = '/dev/input/'+compatibility_mode;
|
|
}
|
|
|
|
// Function to handle translations from English to the user's language
|
|
const ha_language = this.hass.config.language;
|
|
function translateToUsrLang(englishString) {
|
|
var translatedString = englishString;
|
|
if (typeof translationmap.get(ha_language) !== 'undefined'){
|
|
if (typeof translationmap.get(ha_language)[sourceName] !== 'undefined'){
|
|
translatedString = translationmap.get(ha_language)[englishString];
|
|
}
|
|
}
|
|
return translatedString;
|
|
}
|
|
|
|
// Function: Assemble arguments for service calls
|
|
function getCustomServiceArgs(def) {
|
|
if((typeof def.action !== 'undefined' || typeof def.service !== 'undefined') && typeof def.target !== 'undefined') {
|
|
var svcarray;
|
|
if(typeof def.action !== 'undefined') {
|
|
svcarray = def.action.split(".");
|
|
}
|
|
else {
|
|
svcarray = def.service.split(".");
|
|
}
|
|
var data = Object;
|
|
if(typeof def.data !== 'undefined') {
|
|
var extraData = JSON.parse(JSON.stringify(def.data));
|
|
var target = JSON.parse(JSON.stringify(def.target));
|
|
data = Object.assign(target, extraData);
|
|
}
|
|
else {
|
|
data = Object.assign(def.target);
|
|
}
|
|
return new Array(svcarray[0], svcarray[1], data);
|
|
}
|
|
};
|
|
|
|
|
|
|
|
// Check for and handle button overrides before proceeding
|
|
// No HOLD actions for button overrides are supported
|
|
if(typeof overrides !== 'undefined' && overrides !== null) {
|
|
if(typeof overrides[buttonID] !== 'undefined') {
|
|
const overrideDef = overrides[buttonID];
|
|
if(overrideDef !== null) {
|
|
if(typeof overrideDef.script !== 'undefined') {
|
|
// handle overrides via external script
|
|
try{ _hass.callService("script", overrideDef.script, overrideDef.data) }
|
|
catch { return; }
|
|
fireEvent(this, 'haptic', 'light'); // haptic feedback on success
|
|
return;
|
|
}
|
|
else if((typeof overrideDef.service !== 'undefined' || typeof overrideDef.action !== 'undefined') && typeof overrideDef.target !== 'undefined') {
|
|
// handle overrides via yaml instructions
|
|
var ServiceDetails = getCustomServiceArgs(overrideDef);
|
|
try{ _hass.callService(ServiceDetails[0], ServiceDetails[1], ServiceDetails[2]) }
|
|
catch { return; }
|
|
fireEvent(this, 'haptic', 'light'); // haptic feedback on success
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Handle custom launcher button clicks
|
|
// No HOLD actions for custom launchers are supported
|
|
var customLauncherIDPfx = new RegExp('customlauncher ')
|
|
if(customLauncherIDPfx.test(buttonID)){
|
|
var clickedButtonID = buttonID;
|
|
const customLauncherKey = clickedButtonID.substr(0, clickedButtonID.indexOf("-button"));
|
|
if(appmap.has(customLauncherKey)) {
|
|
if(appmap.get(customLauncherKey).script) {
|
|
try{ _hass.callService("script", appmap.get(customLauncherKey).script, appmap.get(customLauncherKey).data) }
|
|
catch { return; }
|
|
fireEvent(this, 'haptic', 'light');
|
|
return;
|
|
}
|
|
else {
|
|
var launcher = appmap.get(customLauncherKey);
|
|
if(typeof launcher.friendlyName !== 'undefined') {
|
|
_config.custom_launchers.forEach(element => {
|
|
var name = launcher.friendlyName.substr(8);
|
|
if (name == element.friendly_name) {
|
|
var ServiceDetails = getCustomServiceArgs(element);
|
|
try{ _hass.callService(ServiceDetails[0], ServiceDetails[1], ServiceDetails[2]) }
|
|
catch { return; }
|
|
fireEvent(this, 'haptic', 'light');
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Handle Built-in App launcher buttons (existing in JSON map)
|
|
// No HOLD actions for app launchers are supported
|
|
const appkey = buttonID.substr(0, buttonID.indexOf("-button"));
|
|
if(appmap.has(appkey)) {
|
|
var familySpecificAppData = appmap.get(appkey)[deviceFamily];
|
|
if(familySpecificAppData && (familySpecificAppData.adbLaunchCommand || familySpecificAppData.appName || familySpecificAppData.remoteCommand)) {
|
|
var adbcommand = familySpecificAppData.adbLaunchCommand;
|
|
var sourceName = familySpecificAppData.appName;
|
|
var remoteCommand = familySpecificAppData.remoteCommand;
|
|
}
|
|
else {
|
|
var adbcommand = appmap.get(appkey).adbLaunchCommand;
|
|
var sourceName = appmap.get(appkey).appName;
|
|
var remoteCommand = appmap.get(appkey).remoteCommand
|
|
}
|
|
sourceName = translateToUsrLang(sourceName);
|
|
fireEvent(this, 'haptic', 'light');
|
|
if (typeof remoteCommand != 'undefined' && ['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
var data = JSON.parse(remoteCommand);
|
|
switch (deviceFamily) {
|
|
case 'apple-tv':
|
|
data['entity_id'] = _config.apple_tv_remote_entity;
|
|
break;
|
|
case 'roku':
|
|
data['entity_id'] = rokuRemoteEntity;
|
|
break;
|
|
}
|
|
_hass.callService("remote", "send_command", data);
|
|
return;
|
|
}
|
|
if (typeof adbcommand == 'undefined') {
|
|
_hass.callService("media_player", "select_source", { entity_id: _config.entity, source: sourceName});
|
|
return;
|
|
}
|
|
else {
|
|
if(adbcommand == 'adb shell reboot') {
|
|
if(confirm('Are you sure you want to reboot '+_hass.states[_config.entity].attributes.friendly_name) == false) {
|
|
return;
|
|
}
|
|
}
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: adbcommand });
|
|
return;
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
// Catch-all for none/other configurations where a button hasn't been defined in YAML config
|
|
if(_config.entity === 'none') {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
|
|
|
|
// detect difference between click or hold actions
|
|
// then carry out the appropriate actions
|
|
const userAction = getActionType(this);
|
|
async function getActionType(that) {
|
|
let type = new Promise((resolve, reject) => {
|
|
|
|
pressedTarget.addEventListener("mouseup", release, true);
|
|
pressedTarget.addEventListener("pointerup", release, true);
|
|
pressedTarget.addEventListener("mouseout", mouseOutHandler, true);
|
|
pressedTarget.addEventListener('touchmove', handleTouchMove, {passive: true});
|
|
timer = setTimeout(function(){
|
|
if(start){
|
|
// it was a hold
|
|
pressedTarget.removeEventListener("mouseup", release, true);
|
|
pressedTarget.removeEventListener("pointerup", release, true);
|
|
pressedTarget.removeEventListener("mouseout", mouseOutHandler, true);
|
|
pressedTarget.removeEventListener('touchmove', handleTouchMove, {passive: true});
|
|
resolve("hold");
|
|
}
|
|
}, holdTime);
|
|
|
|
// it was a click
|
|
function release(){
|
|
clearTimeout(timer);
|
|
let start = null;
|
|
pressedTarget.removeEventListener("mouseup", release, true);
|
|
pressedTarget.removeEventListener("pointerup", release, true);
|
|
pressedTarget.removeEventListener("mouseout", mouseOutHandler, true);
|
|
pressedTarget.removeEventListener('touchmove', handleTouchMove, {passive: true});
|
|
resolve("click");
|
|
}
|
|
|
|
// a non-event is cancelled here
|
|
function mouseOutHandler() {
|
|
clearTimeout(timer);
|
|
let start = null;
|
|
pressedTarget.removeEventListener("mouseup", release, true);
|
|
pressedTarget.removeEventListener("pointerup", release, true);
|
|
pressedTarget.removeEventListener("mouseout", mouseOutHandler, true);
|
|
pressedTarget.removeEventListener('touchmove', handleTouchMove, {passive: true});
|
|
resolve(null);
|
|
}
|
|
function handleTouchMove() {
|
|
clearTimeout(timer);
|
|
let start = null;
|
|
pressedTarget.removeEventListener("mouseup", release, true);
|
|
pressedTarget.removeEventListener("pointerup", release, true);
|
|
pressedTarget.removeEventListener("mouseout", mouseOutHandler, true);
|
|
pressedTarget.removeEventListener('touchmove', handleTouchMove, {passive: true});
|
|
resolve(null);
|
|
}
|
|
});
|
|
|
|
// After determining the button interaction type,
|
|
// send the appropriate commands
|
|
let actionType = await type;
|
|
if (actionType === null) {return;}
|
|
if(actionType == 'click' || actionType == 'hold') {
|
|
|
|
// Flash activity light if it exists
|
|
if (activityLight) {
|
|
activityLight.style.opacity = '1';
|
|
setTimeout(function() {activityLight.style.opacity = '0'}, 100);
|
|
}
|
|
|
|
// provide haptic feedback for button press
|
|
fireEvent(that, 'haptic', 'light')
|
|
|
|
|
|
|
|
// Power Button Click
|
|
if(buttonID == 'power-button' && actionType == 'click') {
|
|
const state = _hass.states[entity];
|
|
const stateStr = state ? state.state : 'off';
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
if(stateStr != 'off' && stateStr != 'unavailable' && stateStr != 'standby') {
|
|
_hass.callService("media_player", "turn_off", { entity_id: entity});
|
|
}
|
|
else {
|
|
_hass.callService("media_player", "turn_on", { entity_id: entity});
|
|
}
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_POWER' });
|
|
}
|
|
else if (compatibility_mode == 'strong' && eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'POWER' });
|
|
}
|
|
else if(compatibility_mode == 'strong') {
|
|
_hass.callService("media_player", "toggle", { entity_id: entity});
|
|
}
|
|
else if(deviceType == 'fire_stick_4k' || deviceType == 'fire_tv_stick_4k_max' ||
|
|
deviceType == 'fire_tv_3rd_gen' || deviceType =='fire_stick_second_gen' ||
|
|
deviceType == 'fire_tv_stick_4k_second_gen' ) {
|
|
if(stateStr != 'off' && stateStr != 'unavailable') {
|
|
_hass.callService("media_player", "turn_off", { entity_id: entity});
|
|
}
|
|
else {
|
|
_hass.callService("media_player", "turn_on", { entity_id: entity});
|
|
}
|
|
}
|
|
else if (deviceType == 'fire_tv_cube_third_gen') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 116 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 116 0 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent /dev/input/event2 1 9 1 && sendevent /dev/input/event2 0 0 0 && sendevent /dev/input/event2 1 9 0 && sendevent /dev/input/event2 0 0 0' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'POWER' });
|
|
}
|
|
return;
|
|
}
|
|
// Power Button Hold
|
|
if(buttonID == 'power-button' && actionType == 'hold') {
|
|
if(['amazon-fire', 'apple-tv', 'chromecast', 'nvidia-shield', 'onn', 'roku'].includes(deviceFamily)) {
|
|
return;
|
|
}
|
|
if(deviceFamily == 'xiaomi'){
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_POWER', num_repeats: 1, delay_secs: 0, hold_secs: 0.75 });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'adb shell input keyevent --longpress POWER'});
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Account Button (Google TV) Click
|
|
if(buttonID == 'profile-button' && actionType == 'click') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'adb shell input keyevent KEYCODE_PROFILE_SWITCH' });
|
|
return;
|
|
};
|
|
// Account Button (Google TV) Hold
|
|
if(buttonID == 'profile-button' && actionType == 'hold') {
|
|
// no special behaviors found for this yet
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Magic Button / Star Button (Google TV / onn pro) Click
|
|
if(buttonID == 'magic-star-button' && actionType == 'click') {
|
|
if (deviceType == 'onn-streaming-device-4k-pro') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'adb shell input keyevent 313' });
|
|
return;
|
|
}
|
|
else {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
};
|
|
// Magic Button / Star Button (Google TV / onn pro) Hold
|
|
if(buttonID == 'magic-star-button' && actionType == 'hold') {
|
|
if (deviceType == 'onn-streaming-device-4k-pro') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'adb shell input keyevent --longpress 313' });
|
|
return;
|
|
}
|
|
else {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
};
|
|
|
|
|
|
|
|
// Keyboard button click
|
|
if(buttonID == 'keyboard-button' && actionType == 'click') {
|
|
if(['apple-tv'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
var text = prompt("Enter text to send");
|
|
if (text && text != '') {
|
|
if(['roku'].includes(deviceFamily)) {
|
|
_hass.callService("remote", "send_command", { entity_id: rokuRemoteEntity, command: 'Lit_'+text, num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}
|
|
else {
|
|
var escapedText = text.replace(/"/g, "\\\"");
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'input text "'+escapedText+'"' });
|
|
}
|
|
}
|
|
return;
|
|
};
|
|
// Keyboard button hold
|
|
if(buttonID == 'keyboard-button' && actionType == 'hold') {
|
|
// no special behaviors dreamed up for this yet
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Up Button click
|
|
if(buttonID == 'up-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
var t = deviceFamily+"_remote_entity";
|
|
var confname = t.replace(/\-/, "_");
|
|
_hass.callService("remote", "send_command", { entity_id: _config[confname], command: 'up', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_UP' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'UP' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 103 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 103 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Up Button hold
|
|
if(buttonID == 'up-button' && actionType == 'hold') {
|
|
if(['apple-tv'].includes(deviceFamily)) {
|
|
// needs to be at least 1sec hold time for Apple TV
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'up', num_repeats: 1, delay_secs: 0, hold_secs: 1});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'up', num_repeats: 1, delay_secs: 0, hold_secs: 1});
|
|
}, 1025);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(['roku'].includes(deviceFamily)) {
|
|
// hold does not work with Roku - https://github.com/home-assistant/core/issues/123999 - using a 1/4 sec repeat is an ok substitute for now
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'up', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'up', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_UP', num_repeats: 1, delay_secs: 0, hold_secs: 0.5});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_UP', num_repeats: 1, delay_secs: 0, hold_secs: 0.5});
|
|
}, 525);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'UP' });
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'UP' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 103 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 103 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Left Button Click
|
|
if(buttonID == 'left-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
var t = deviceFamily+"_remote_entity";
|
|
var confname = t.replace(/\-/, "_");
|
|
_hass.callService("remote", "send_command", { entity_id: _config[confname], command: 'left', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_LEFT' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'LEFT' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 105 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 105 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Left Button Hold
|
|
if(buttonID == 'left-button' && actionType == 'hold') {
|
|
if(['apple-tv'].includes(deviceFamily)) {
|
|
// needs to be at least 1sec hold time for Apple TV
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'left', num_repeats: 1, delay_secs: 0, hold_secs: 1});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'left', num_repeats: 1, delay_secs: 0, hold_secs: 1});
|
|
}, 1025);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(['roku'].includes(deviceFamily)) {
|
|
// hold does not work with Roku - https://github.com/home-assistant/core/issues/123999 - using a 1/4 sec repeat is an ok substitute for now
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'left', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'left', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_LEFT', num_repeats: 1, delay_secs: 0, hold_secs: 0.5});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_LEFT', num_repeats: 1, delay_secs: 0, hold_secs: 0.5});
|
|
}, 525);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'LEFT' });
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'LEFT' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 105 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 105 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Right Button Click
|
|
if(buttonID == 'right-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
var t = deviceFamily+"_remote_entity";
|
|
var confname = t.replace(/\-/, "_");
|
|
_hass.callService("remote", "send_command", { entity_id: _config[confname], command: 'right', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_RIGHT' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'RIGHT' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 106 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 106 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Right Button Hold
|
|
if(buttonID == 'right-button' && actionType == 'hold') {
|
|
if(['apple-tv'].includes(deviceFamily)) {
|
|
// needs to be at least 1sec hold time for Apple TV
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'right', num_repeats: 1, delay_secs: 0, hold_secs: 1});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'right', num_repeats: 1, delay_secs: 0, hold_secs: 1});
|
|
}, 1025);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(['roku'].includes(deviceFamily)) {
|
|
// hold does not work with Roku - https://github.com/home-assistant/core/issues/123999 - using a 1/4 sec repeat is an ok substitute for now
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'right', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'right', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_RIGHT', num_repeats: 1, delay_secs: 0, hold_secs: 0.5});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_RIGHT', num_repeats: 1, delay_secs: 0, hold_secs: 0.5});
|
|
}, 525);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'RIGHT' });
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'RIGHT' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 106 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 106 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Down Button Click
|
|
if(buttonID == 'down-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
var t = deviceFamily+"_remote_entity";
|
|
var confname = t.replace(/\-/, "_");
|
|
_hass.callService("remote", "send_command", { entity_id: _config[confname], command: 'down', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_DOWN' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'DOWN' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 108 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 108 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Down Button Hold
|
|
if(buttonID == 'down-button' && actionType == 'hold') {
|
|
if(['apple-tv'].includes(deviceFamily)) {
|
|
// needs to be at least 1sec hold time for Apple TV
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'down', num_repeats: 1, delay_secs: 0, hold_secs: 1});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'down', num_repeats: 1, delay_secs: 0, hold_secs: 1});
|
|
}, 1025);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(['roku'].includes(deviceFamily)) {
|
|
// hold does not work with Roku - https://github.com/home-assistant/core/issues/123999 - using a 1/4 sec repeat is an ok substitute for now
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'down', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'down', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_DOWN', num_repeats: 1, delay_secs: 0, hold_secs: 0.5});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_DOWN', num_repeats: 1, delay_secs: 0, hold_secs: 0.5});
|
|
}, 525);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'DOWN' });
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'DOWN' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 108 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 108 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Center Button Click
|
|
if(buttonID == 'center-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
var t = deviceFamily+"_remote_entity";
|
|
var confname = t.replace(/\-/, "_");
|
|
_hass.callService("remote", "send_command", { entity_id: _config[confname], command: 'select', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_CENTER' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'CENTER' });
|
|
}
|
|
else {
|
|
if(deviceType == 'fire_tv_4_series' || deviceType == 'fire_tv_toshiba_v35' || deviceType == 'fire_tv_jvc-4k-2021') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 28 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 28 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
else if(deviceType == 'mi-box-s') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 353 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 353 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 96 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 96 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
// Center Button Hold
|
|
if(buttonID == 'center-button' && actionType == 'hold') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
var t = deviceFamily+"_remote_entity";
|
|
var confname = t.replace(/\-/, "_");
|
|
// This strategy does not work with Roku - https://github.com/home-assistant/core/issues/123999
|
|
_hass.callService("remote", "send_command", { entity_id: _config[confname], command: 'select', num_repeats: 1, delay_secs: 0, hold_secs: 1});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_DPAD_CENTER', num_repeats: 1, delay_secs: 0, hold_secs: 0.75 });
|
|
return;
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
// This adb shell input keyevent --longpress 23 strategy does not seem to work with the NVIDIA Shield, onn. or Chromecast through ADB
|
|
// need to rapidfire the center button like we do the other dpad buttons
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'adb shell input keyevent 23' });
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'adb shell input keyevent 23' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else {
|
|
if(deviceType == 'fire_tv_4_series' || deviceType == 'fire_tv_toshiba_v35' || deviceType == 'fire_tv_jvc-4k-2021') {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 28 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 28 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
else if(deviceType == 'mi-box-s') {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 353 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 353 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 96 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 96 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Replay Button Click
|
|
if(buttonID == 'replay-button' && actionType == 'click') {
|
|
if(['roku'].includes(deviceFamily)) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'replay', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
else {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
}
|
|
// Replay Button Hold
|
|
if(buttonID == 'replay-button' && actionType == 'hold') {
|
|
if(['roku'].includes(deviceFamily)) {
|
|
// hold does not work with Roku - https://github.com/home-assistant/core/issues/123999 - using a 1/4 sec repeat is an ok substitute for now
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'replay', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'replay', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Options Button Click
|
|
if(buttonID == 'options-button' && actionType == 'click') {
|
|
if(['roku'].includes(deviceFamily)) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'info', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
}
|
|
// Options Button Hold
|
|
if(buttonID == 'options-button' && actionType == 'hold') {
|
|
// no special behaviors found for this yet
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Apps Button Click
|
|
if(buttonID == 'apps-button' && actionType == 'click') {
|
|
if (deviceType == 'mi-box-s') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell am start -n com.google.android.tvlauncher/.appsview.AppsViewActivity' });
|
|
}
|
|
else if (deviceFamily == 'nvidia-shield') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_APP_SWITCH' });
|
|
}
|
|
else if (deviceFamily == 'amazon-fire') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'am start -n com.amazon.venezia/com.amazon.venezia.grid.AppsGridLauncherActivity' });
|
|
}
|
|
else if (deviceFamily == 'onn') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_ALL_APPS' });
|
|
}
|
|
else if (deviceFamily == 'roku') {
|
|
unsupportedButton();
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'RECENTS' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 757 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 757 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Apps Button Hold
|
|
if(buttonID == 'apps-button' && actionType == 'hold') {
|
|
// no special behaviors found for this yet
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Back Button Click
|
|
if(buttonID == 'back-button' && actionType == 'click') {
|
|
if(deviceFamily == 'apple-tv') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'menu', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(deviceFamily == 'roku') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'back', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_BACK' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'BACK' });
|
|
}
|
|
return;
|
|
}
|
|
// Back Button Hold
|
|
if(buttonID == 'back-button' && actionType == 'hold') {
|
|
// no special behaviors found for this with Chromecast, FireTV, onn., NVIDIA Shield, Roku, or Xiaomi mi
|
|
if(deviceFamily == 'apple-tv') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'home', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Home Button Click
|
|
if(buttonID == 'home-button' && actionType == 'click') {
|
|
if(deviceFamily == 'apple-tv') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'top_menu', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(deviceFamily == 'roku') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'home', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_HOME' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'HOME' });
|
|
}
|
|
return;
|
|
}
|
|
// Home Button Hold
|
|
if(buttonID == 'home-button' && actionType == 'hold') {
|
|
// no special behavior noticed for Roku
|
|
if(deviceFamily == 'amazon-fire') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent SETTINGS' });
|
|
}
|
|
else if(['chromecast', 'onn'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 83' });
|
|
}
|
|
else if(deviceFamily == 'apple-tv') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'home', num_repeats: 1, delay_secs: 0, hold_secs: 1});
|
|
}
|
|
else if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_HOME', num_repeats: 1, delay_secs: 0, hold_secs: 0.75});
|
|
}
|
|
else if(['nvidia-shield', 'xiaomi'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_ALL_APPS' });
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Hamburger Button Click
|
|
if(buttonID == 'hamburger-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku', 'onn'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
if(deviceType == 'shield-tv-pro-2019' || deviceType == 'shield-tv-2019') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'am start -a android.settings.SETTINGS' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'MENU' });
|
|
}
|
|
else if(['xiaomi'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell am start -n com.android.tv.settings/com.android.tv.settings.MainSettings' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 139 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 139 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Hamburger Button Hold
|
|
if(buttonID == 'hamburger-button' && actionType == 'hold') {
|
|
// no special behaviors found for this with FireTV, or NVIDIA Shield
|
|
// the hamburger button for Xiaomi isn't actually real
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Rewind Button Click
|
|
if(buttonID == 'rewind-button' && actionType == 'click') {
|
|
if(deviceFamily == 'apple-tv') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'skip_backward', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(deviceFamily == 'roku') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'reverse', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_MEDIA_REWIND' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined' || deviceType == 'mi-box-s') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'REWIND' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 168 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 168 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Rewind Button Hold
|
|
if(buttonID == 'rewind-button' && actionType == 'hold') {
|
|
if(['apple-tv'].includes(deviceFamily)) {
|
|
// n/a for Apple TV (assuming rewind translates to skip_backward)
|
|
return;
|
|
}
|
|
if(['roku'].includes(deviceFamily)) {
|
|
// hold does not work with Roku - https://github.com/home-assistant/core/issues/123999 - using a 0.15 sec repeat is an ok-ish substitute for now
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'reverse', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'reverse', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 150);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_MEDIA_REWIND', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_MEDIA_REWIND', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 100);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'REWIND' });
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'REWIND' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 168 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 168 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Play/Pause Button Click
|
|
if(buttonID == 'playpause-button' && actionType == 'click') {
|
|
if(deviceFamily == 'apple-tv') {
|
|
var playpausecommand = 'pause';
|
|
if(_hass.states[_config.entity].state=='paused'){ playpausecommand = 'play'; };
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: playpausecommand, num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(deviceFamily == 'roku') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'play', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_MEDIA_PLAY_PAUSE' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined' || deviceType == 'mi-box-s') {
|
|
_hass.callService("media_player", "media_play_pause", { entity_id: _config.entity});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 164 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 164 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Play/Pause Button Hold
|
|
if(buttonID == 'playpause-button' && actionType == 'hold') {
|
|
// Button does not exist for apple tv, chromecast, onn., or xiaomi - so no hold behaviors are emulated
|
|
// No special behaviors noticed for this with FireTV, NVIDIA Shield, or Roku
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Fast Forward Button Click
|
|
if(buttonID == 'fastforward-button' && actionType == 'click') {
|
|
if(deviceFamily == 'apple-tv') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'skip_forward', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(deviceFamily == 'roku') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'forward', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_MEDIA_FAST_FORWARD' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined' || deviceType == 'mi-box-s') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'FAST_FORWARD' });
|
|
}
|
|
else {
|
|
if(deviceType == 'fire_tv_4_series' || deviceType == 'fire_tv_toshiba_v35' || deviceType == 'fire_tv_jvc-4k-2021') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 159 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 159 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 208 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 208 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
// Fast Forward Button Hold
|
|
if(buttonID == 'fastforward-button' && actionType == 'hold') {
|
|
if(['apple-tv'].includes(deviceFamily)) {
|
|
// n/a for Apple TV (assuming fast forward translates to skip_forward)
|
|
return;
|
|
}
|
|
if(['roku'].includes(deviceFamily)) {
|
|
// hold does not work with Roku - https://github.com/home-assistant/core/issues/123999 - using a 0.15 sec repeat is an ok-ish substitute for now
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'forward', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'forward', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 150);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_MEDIA_FAST_FORWARD', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: atvRemoteEntity, command: 'KEYCODE_MEDIA_FAST_FORWARD', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 100);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'FAST_FORWARD' });
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'FAST_FORWARD' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
}
|
|
else {
|
|
if(deviceType == 'fire_tv_4_series' || deviceType == 'fire_tv_toshiba_v35' || deviceType == 'fire_tv_jvc-4k-2021') {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 159 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 159 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 208 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 208 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Volume Up Button Click
|
|
if(buttonID == 'volume-up-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
var t = deviceFamily+"_remote_entity";
|
|
var confname = t.replace(/\-/, "_");
|
|
_hass.callService("remote", "send_command", { entity_id: _config[confname], command: 'volume_up', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_VOLUME_UP' });
|
|
}
|
|
else if(deviceFamily == 'nvidia-shield') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell cmd media_session volume --show --adj raise' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'VOLUME_UP' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 115 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 115 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Volume Up Button Hold
|
|
if(buttonID == 'volume-up-button' && actionType == 'hold') {
|
|
if(['apple-tv'].includes(deviceFamily)) {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'volume_up', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(['roku'].includes(deviceFamily)) {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'volume_up', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_VOLUME_UP' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
else if(deviceFamily == 'nvidia-shield') {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell cmd media_session volume --show --adj raise' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'VOLUME_UP' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 115 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 115 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Volume Down Button Click
|
|
if(buttonID == 'volume-down-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
var t = deviceFamily+"_remote_entity";
|
|
var confname = t.replace(/\-/, "_");
|
|
_hass.callService("remote", "send_command", { entity_id: _config[confname], command: 'volume_down', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_VOLUME_DOWN' });
|
|
}
|
|
else if(deviceFamily == 'nvidia-shield') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell cmd media_session volume --show --adj lower' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'VOLUME_DOWN' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 114 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 114 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Volume Down Button Hold
|
|
if(buttonID == 'volume-down-button' && actionType == 'hold') {
|
|
if(['apple-tv'].includes(deviceFamily)) {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.apple_tv_remote_entity, command: 'volume_down', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(['roku'].includes(deviceFamily)) {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'volume_down', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_VOLUME_DOWN' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
else if(deviceFamily == 'nvidia-shield') {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell cmd media_session volume --show --adj lower' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'VOLUME_DOWN' });
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 114 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 114 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Mute Button Click
|
|
if(buttonID == 'mute-button' && actionType == 'click') {
|
|
if(deviceFamily == 'apple-tv') {
|
|
unsupportedButton();
|
|
}
|
|
if(deviceFamily == 'roku') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'volume_mute', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if(hasATVAssociation) {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.android_tv_remote_entity, command: 'KEYCODE_VOLUME_MUTE' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'MUTE' });
|
|
}
|
|
else if (deviceType == 'mi-box-s') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 164'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 113 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 113 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Mute Button Hold
|
|
if(buttonID == 'mute-button' && actionType == 'hold') {
|
|
// Button does not exist for chromecast, NVIDIA Shield, or xiaomi - so no hold behaviors are emulated
|
|
// No special behaviors noticed for this with Apple TV, FireTV, onn., or Roku
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Channel Up Button Click
|
|
if(buttonID == 'channel-up-button' && actionType == 'click') {
|
|
if(['apple-tv', 'chromecast', 'nvidia-shield', 'xiaomi'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
if(deviceFamily == 'roku') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'channel_up', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if (['homatics'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_CHANNEL_UP'});
|
|
return;
|
|
}
|
|
if (['fire_tv_stick_4k_second_gen', 'fire_tv_stick_4k_max_second_gen', 'onn-streaming-device-4k-pro', 'onn-4k-streaming-box', 'onn-full-hd-streaming-stick'].includes(deviceType)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_CHANNEL_UP'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 402 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 402 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Channel Up Button Hold
|
|
if(buttonID == 'channel-up-button' && actionType == 'hold') {
|
|
// No special behaviors noticed for this with onn.
|
|
// Button does not exist for Apple TV, Chromecast, Homatics, NVIDIA Shield, or Xiaomi - so no hold behaviors are emulated
|
|
if(['onn', 'apple-tv', 'chromecast', 'homatics', 'nvidia-shield', 'xiaomi'].includes(deviceFamily)) {
|
|
return;
|
|
}
|
|
if(['roku'].includes(deviceFamily)) {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'channel_up', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
else {
|
|
if (['fire_tv_stick_4k_second_gen', 'fire_tv_stick_4k_max_second_gen'].includes(deviceType)) {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_CHANNEL_UP'});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 402 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 402 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Channel Down Button Click
|
|
if(buttonID == 'channel-down-button' && actionType == 'click') {
|
|
if(['apple-tv', 'chromecast', 'nvidia-shield', 'xiaomi'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
if(deviceFamily == 'roku') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'channel_down', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
if (['homatics'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_CHANNEL_DOWN'});
|
|
return;
|
|
}
|
|
if (['fire_tv_stick_4k_second_gen', 'fire_tv_stick_4k_max_second_gen', 'onn-streaming-device-4k-pro', 'onn-4k-streaming-box', 'onn-full-hd-streaming-stick'].includes(deviceType)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_CHANNEL_DOWN'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 403 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 403 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Channel Down Button Hold
|
|
if(buttonID == 'channel-down-button' && actionType == 'hold') {
|
|
// No special behaviors noticed for this with onn.
|
|
// Button does not exist for Apple TV, Chromecast, NVIDIA Shield, or Xiaomi - so no hold behaviors are emulated
|
|
if(['onn', 'apple-tv', 'chromecast', 'homatics', 'nvidia-shield', 'xiaomi'].includes(deviceFamily)) {
|
|
return;
|
|
}
|
|
if(['roku'].includes(deviceFamily)) {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'channel_down', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
else {
|
|
if (['fire_tv_stick_4k_second_gen', 'fire_tv_stick_4k_max_second_gen'].includes(deviceType)) {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
let rpt = setInterval( function() {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_CHANNEL_DOWN'});
|
|
}, 250);
|
|
function rls() {
|
|
clearInterval(rpt);
|
|
}
|
|
return;
|
|
}
|
|
else {
|
|
clicked.target.addEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 403 1 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
function rls() {
|
|
clicked.target.removeEventListener("pointerup", rls, true);
|
|
_hass.callService("androidtv", "adb_command", { entity_id: entity, command: 'sendevent '+eventListenerBinPath+' 1 403 0 && sendevent '+eventListenerBinPath+' 0 0 0 '});
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// TV Button Click
|
|
if(buttonID == 'tv-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku', 'nvidia-shield'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
if (deviceType == 'fire_tv_cube_third_gen') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 297'});
|
|
}
|
|
else if (deviceType == 'fire_tv_stick_4k_second_gen' || deviceType == 'fire_tv_stick_4k_max_second_gen') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 300'});
|
|
}
|
|
else if (deviceType == 'mi-box-s') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell am start -n com.google.android.tv/com.android.tv.MainActivity' });
|
|
}
|
|
else if (['onn', 'homatics'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_GUIDE'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 362 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 362 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// TV Button Button Hold
|
|
if(buttonID == 'tv-button' && actionType == 'hold') {
|
|
// no special behaviors found for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Settings Button Click
|
|
if(buttonID == 'settings-button' && actionType == 'click') {
|
|
if(['roku', 'nvidia-shield'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
if (['onn'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 83' });
|
|
}
|
|
else if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined' || deviceType == 'fire_tv_cube_third_gen') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'SETTINGS' });
|
|
}
|
|
else if(deviceType == 'mi-box-s') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell am start -n com.android.tv.settings/com.android.tv.settings.MainSettings' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 249 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 249 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Settings Button Button Hold
|
|
if(buttonID == 'settings-button' && actionType == 'hold') {
|
|
// no special behaviors found for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// App Switch (recents) Button
|
|
if(buttonID == 'app-switch-button' && actionType == 'click') {
|
|
if(compatibility_mode == 'strong') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'RECENTS' });
|
|
}
|
|
else if (deviceType == 'fire_tv_stick_4k_second_gen' || deviceType == 'fire_tv_stick_4k_max_second_gen') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 307'});
|
|
}
|
|
else if(eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'RECENTS' });
|
|
}
|
|
else if (deviceType == 'fire_tv_cube_third_gen') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 304'});
|
|
}
|
|
else if (deviceType == 'mi-box-s') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_APP_SWITCH' });
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 757 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 757 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// App Switch (recents) Button Hold
|
|
if(buttonID == 'app-switch-button' && actionType == 'hold') {
|
|
// no special behaviors found for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Headset Button Click
|
|
if(buttonID == 'headset-button' && actionType == 'click') {
|
|
if (['amazon-fire'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent BUTTON_3'});
|
|
}
|
|
else if (['onn'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_PAIRING'});
|
|
}
|
|
else if (['chromecast', 'nvidia-shield', 'xiaomi'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell am start -n com.android.tv.settings/com.android.tv.settings.accessories.AddAccessoryActivity'});
|
|
}
|
|
else {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
return;
|
|
}
|
|
// Headset Button Hold
|
|
if(buttonID == 'headset-button' && actionType == 'hold') {
|
|
// no special behaviors found for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Programmable 1 Button Click
|
|
if(buttonID == 'programmable-one-button' && actionType == 'click') {
|
|
if(['amazon-fire'].includes(deviceFamily)) {
|
|
if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent BUTTON_1'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 638 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 638 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
else {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
}
|
|
// Programmable 1 Button Hold
|
|
if(buttonID == 'programmable-one-button' && actionType == 'hold') {
|
|
if(['amazon-fire'].includes(deviceFamily)) {
|
|
if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
//TODO: - (spent too much time here already)
|
|
}
|
|
else {
|
|
//_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 638 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sleep 1 && sendevent '+eventListenerBinPath+' 1 638 0 && sendevent '+eventListenerBinPath+' 0 0 0' }); // TODO: sleep does not work as expected? (spent too much time here already)
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Programmable 2 Button Click
|
|
if(buttonID == 'programmable-two-button' && actionType == 'click') {
|
|
if(['amazon-fire'].includes(deviceFamily)) {
|
|
if(compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent BUTTON_2'}); // this is wrong for fire_tv_4_series
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 4 4 787071 && sendevent '+eventListenerBinPath+' 1 639 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 4 4 787071 && sendevent '+eventListenerBinPath+' 1 639 0 && sendevent '+eventListenerBinPath+' 0 0 0' }); // wrong w/event0 on ftv 4
|
|
}
|
|
return;
|
|
}
|
|
else {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
}
|
|
// Programmable 2 Button Hold
|
|
if(buttonID == 'programmable-two-button' && actionType == 'hold') {
|
|
// TODO - (spent too much time here already)
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Info Button Click
|
|
if(buttonID == 'info-button' && actionType == 'click') {
|
|
if(!(['homatics'].includes(deviceFamily))) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 165'});
|
|
}
|
|
return;
|
|
}
|
|
// Info Button Click
|
|
if(buttonID == 'info-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
// Bookmark Button Click
|
|
if(buttonID == 'bookmark-button' && actionType == 'click') {
|
|
if(!(['homatics'].includes(deviceFamily))) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_BOOKMARK'});
|
|
}
|
|
return;
|
|
}
|
|
// Bookmark Button Click
|
|
if(buttonID == 'bookmark-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
// Numeric 1 Button Click
|
|
if(buttonID == 'num1-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 8'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 2 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 2 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Numeric 1 Button Hold
|
|
if(buttonID == 'num1-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Numeric 2 Button Click
|
|
if(buttonID == 'num2-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 9'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 3 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 3 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Numeric 2 Button Hold
|
|
if(buttonID == 'num2-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Numeric 3 Button Click
|
|
if(buttonID == 'num3-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 10'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 4 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 4 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Numeric 3 Button Hold
|
|
if(buttonID == 'num3-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Numeric 4 Button Click
|
|
if(buttonID == 'num4-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 11'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 5 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 5 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Numeric 4 Button Hold
|
|
if(buttonID == 'num4-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Numeric 5 Button Click
|
|
if(buttonID == 'num5-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 12'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 6 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 6 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Numeric 5 Button Hold
|
|
if(buttonID == 'num5-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Numeric 6 Button Click
|
|
if(buttonID == 'num6-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 13'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 7 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 7 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Numeric 6 Button Hold
|
|
if(buttonID == 'num6-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Numeric 7 Button Click
|
|
if(buttonID == 'num7-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 14'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 8 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 8 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Numeric 7 Button Hold
|
|
if(buttonID == 'num7-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Numeric 8 Button Click
|
|
if(buttonID == 'num8-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 15'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 9 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 9 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Numeric 8 Button Hold
|
|
if(buttonID == 'num8-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Numeric 9 Button Click
|
|
if(buttonID == 'num9-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 16'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 10 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 10 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Numeric 9 Button Hold
|
|
if(buttonID == 'num9-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Numeric 0 Button Click
|
|
if(buttonID == 'num0-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 7'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 11 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 11 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// Numeric 0 Button Hold
|
|
if(buttonID == 'num0-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// SUBT Button Click
|
|
if(buttonID == 'subtitle-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else if (compatibility_mode == 'strong' || eventListenerBinPath == 'undefined') {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 175'});
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+eventListenerBinPath+' 1 469 1 && sendevent '+eventListenerBinPath+' 0 0 0 && sendevent '+eventListenerBinPath+' 1 469 0 && sendevent '+eventListenerBinPath+' 0 0 0' });
|
|
}
|
|
return;
|
|
}
|
|
// SUBT Button Hold
|
|
if(buttonID == 'subtitle-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// LIVE Button Click
|
|
if(buttonID == 'live-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else {
|
|
if(deviceType == 'fire_tv_jvc-4k-2021') {
|
|
var tempbinpath = '/dev/input/event4'
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'sendevent '+tempbinpath+' 1 358 1 && sendevent '+tempbinpath+' 0 0 0 && sendevent '+tempbinpath+' 1 358 0 && sendevent '+tempbinpath+' 0 0 0' });
|
|
}
|
|
else if (['fire_tv_4_series', 'fire_tv_toshiba_v35"'].includes(deviceType)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent KEYCODE_TV'});
|
|
}
|
|
else {
|
|
unsupportedButton();
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
// LIVE Button Hold
|
|
if(buttonID == 'live-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Red Button Click
|
|
if(buttonID == 'red-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 183'});
|
|
}
|
|
return;
|
|
}
|
|
// Red Button Hold
|
|
if(buttonID == 'red-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Green Button Click
|
|
if(buttonID == 'green-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 184'});
|
|
}
|
|
return;
|
|
}
|
|
// Green Button Hold
|
|
if(buttonID == 'green-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Yellow Button Click
|
|
if(buttonID == 'yellow-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 185'});
|
|
}
|
|
return;
|
|
}
|
|
// Yellow Button Hold
|
|
if(buttonID == 'yellow-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Blue Button Click
|
|
if(buttonID == 'blue-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 186'});
|
|
}
|
|
return;
|
|
}
|
|
// Blue Button Hold
|
|
if(buttonID == 'blue-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Voice Button Click
|
|
if(buttonID == 'voice-button' && actionType == 'click') {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
// Voice Button Hold
|
|
if(buttonID == 'voice-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Sleep Button Click
|
|
if(buttonID == 'sleep-button' && actionType == 'click') {
|
|
if(deviceFamily == 'roku') {
|
|
_hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: 'sleep', num_repeats: 1, delay_secs: 0, hold_secs: 0});
|
|
return;
|
|
}
|
|
else {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
}
|
|
// Sleep Button Hold
|
|
if(buttonID == 'sleep-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// PatchWall Button Click
|
|
if(buttonID == 'patchwall-button' && actionType == 'click') {
|
|
if(['xiaomi'].includes(deviceFamily)) {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell am start com.mitv.tvhome.atv'});
|
|
}
|
|
else {
|
|
unsupportedButton();
|
|
}
|
|
return;
|
|
}
|
|
// PatchWall Button Hold
|
|
if(buttonID == 'patchwall-button' && actionType == 'hold') {
|
|
// no special behaviors known for this - I'm unable to test in my region
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Input Button Click
|
|
if(buttonID == 'input-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
}
|
|
else {
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell input keyevent 178'});
|
|
}
|
|
return;
|
|
}
|
|
// Input Button Hold
|
|
if(buttonID == 'input-button' && actionType == 'hold') {
|
|
// no special behaviors known for this
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Reboot Button Click
|
|
if(buttonID == 'reboot-button' && actionType == 'click') {
|
|
if(['apple-tv', 'roku'].includes(deviceFamily)) {
|
|
unsupportedButton();
|
|
return;
|
|
}
|
|
if(confirm('Are you sure you want to reboot '+_hass.states[_config.entity].attributes.friendly_name) == false) {
|
|
return;
|
|
}
|
|
_hass.callService("androidtv", "adb_command", { entity_id: _config.entity, command: 'adb shell reboot' });
|
|
return;
|
|
}
|
|
// Reboot Button Hold
|
|
if(buttonID == 'reboot-button' && actionType == 'hold') {
|
|
// no special actions imagined for this yet
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Search Button Click (Apple TV Remote style 2)
|
|
if(buttonID == 'search-button' && actionType == 'click') {
|
|
if(['apple-tv'].includes(deviceFamily)) {
|
|
_hass.callService("media_player", "select_source", { entity_id: _config.entity, source: "Search"});
|
|
}
|
|
else {
|
|
unsupportedButton();
|
|
}
|
|
return;
|
|
}
|
|
// Search Button Hold (Apple TV Remote style 2)
|
|
if(buttonID == 'search-button' && actionType == 'hold') {
|
|
// no special behaviors known for this - I do not own this, so I'm unable to test
|
|
return;
|
|
}
|
|
|
|
|
|
// TODO: Not important, but also not working with the refactor
|
|
// // Roku Function: Secret Screen Click
|
|
// if(buttonID == 'roku-secret-screen-button' && actionType == 'click') {
|
|
// if(['roku'].includes(deviceFamily)) {
|
|
// var command = ['home', 'home', 'home', 'home', 'home', 'forward', 'forward', 'forward', 'reverse', 'reverse'];
|
|
// for (let index = 0, len = command.length; index < len; ++index) {
|
|
// setTimeout(() =>
|
|
// _hass.callService("remote", "send_command", { entity_id: _config.roku_remote_entity, command: command[index], num_repeats: 1, delay_secs: 0, hold_secs: 0}),
|
|
// index*50);
|
|
// }
|
|
// }
|
|
// else {
|
|
// unsupportedButton();
|
|
// }
|
|
// return;
|
|
// }
|
|
// // Roku Function: Secret Screen Hold
|
|
// if(buttonID == 'roku-secret-screen-button' && actionType == 'hold') {
|
|
// // no special actions imagined for this yet
|
|
// return;
|
|
// }
|
|
|
|
|
|
// uncaught button presses land here
|
|
//console.log('unhandled '+actionType+' action for '+buttonID);
|
|
return;
|
|
|
|
|
|
}
|
|
else {
|
|
// unhandled actiontype
|
|
return;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
customElements.define('firemote-card', FiremoteCard);
|
|
|
|
|
|
// Allow this card to appear in the card chooser menu
|
|
window.customCards = window.customCards || [];
|
|
window.customCards.push({
|
|
type: "firemote-card",
|
|
name: "Firemote Card",
|
|
preview: true,
|
|
description: "Remote control card for Amazon FireTV, Apple TV, Chromecast, NVIDIA Shield, onn., Roku, and Xiaomi devices"
|
|
});
|
|
|
|
|
|
|
|
// Ceate and register the card editor
|
|
class FiremoteCardEditor extends LitElement {
|
|
|
|
static get properties() {
|
|
return {
|
|
hass: {},
|
|
_config: {},
|
|
};
|
|
}
|
|
|
|
// setConfig works the same way as for the card itself
|
|
setConfig(config) {
|
|
this._config = config;
|
|
}
|
|
|
|
// This function is called when the input element of the editor loses focus or is changed
|
|
configChanged(ev) {
|
|
|
|
const _config = Object.assign({}, this._config);
|
|
_config[ev.target.name.toString()] = ev.target.value;
|
|
this._config = _config;
|
|
|
|
if (ev.type == 'change') {
|
|
// If the Device Family changes, we need to blank the device type value, or
|
|
// if a boolean style checkbox value changes, special handling is required
|
|
switch(ev.target.id) {
|
|
case 'device_family':
|
|
this._config.device_type = null;
|
|
break;
|
|
case 'hideFramesCheckbox':
|
|
this._config.hide_button_group_frame = ev.target.checked;
|
|
break;
|
|
case 'useCustomSkinCheckbox':
|
|
this._config.useCustomSkin = ev.target.checked;
|
|
break;
|
|
case "showMediaControlsCheckbox":
|
|
this._config.show_media_controls = ev.target.checked;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// A config-changed event will tell lovelace we have made a change to the configuration
|
|
// this will make sure the changes are saved correctly later and will update the preview
|
|
const event = new CustomEvent("config-changed", {
|
|
detail: { config: _config },
|
|
bubbles: true,
|
|
composed: true,
|
|
});
|
|
this.dispatchEvent(event);
|
|
}
|
|
|
|
|
|
translateToUsrLang(englishString) {
|
|
const ha_language = this.hass.config.language;
|
|
var translatedString = englishString;
|
|
if (typeof translationmap.get(ha_language) !== 'undefined'){
|
|
if (typeof translationmap.get(ha_language)[englishString] !== 'undefined'){
|
|
translatedString = translationmap.get(ha_language)[englishString];
|
|
}
|
|
}
|
|
return translatedString;
|
|
}
|
|
|
|
removeMatching(originalArray, regex) {
|
|
var j = 0;
|
|
while (j < originalArray.length) {
|
|
if (regex.test(originalArray[j]))
|
|
originalArray.splice(j, 1);
|
|
else
|
|
j++;
|
|
}
|
|
return originalArray;
|
|
}
|
|
|
|
getEntitiesByType(type) {
|
|
return Object.keys(this.hass.states).filter(
|
|
(eid) => eid.substr(0, eid.indexOf('.')) === type
|
|
);
|
|
}
|
|
|
|
getEntitiesByPlatform(platformName) {
|
|
return Object.keys(this.hass.entities).filter(
|
|
(eid) => this.hass.entities[eid].platform === platformName
|
|
);
|
|
}
|
|
|
|
getMediaPlayerEntitiesByPlatform(platformName) {
|
|
var entities = Object.keys(this.hass.entities).filter(
|
|
(eid) => this.hass.entities[eid].platform === platformName
|
|
);
|
|
const re = /media_player/;
|
|
return entities.filter(a => re.exec(a));
|
|
}
|
|
|
|
|
|
getRemoteEntitiesByPlatform(platformName) {
|
|
//console.log(this.hass.entities);
|
|
var entities = Object.keys(this.hass.entities).filter(
|
|
(eid) => this.hass.entities[eid].platform === platformName
|
|
);
|
|
const re = /remote/;
|
|
const negreg = /Supports/i;
|
|
return this.removeMatching(entities.filter(a => re.exec(a)), negreg);
|
|
}
|
|
|
|
getDeviceFamiliesDropdown(optionvalue){
|
|
var familykeys = [];
|
|
for(var [key, value] of devicemap.entries()) {
|
|
familykeys.push(key)
|
|
}
|
|
return html `
|
|
<select name="device_family" id="device_family" style="padding: .6em; font-size: 1em;"
|
|
.value=${optionvalue}
|
|
@focusout=${this.configChanged}
|
|
@change=${this.configChanged}
|
|
>
|
|
${familykeys.map((family) => {
|
|
var familyTranslatedName = this.translateToUsrLang(devicemap.get(family).meta.friendlyName);
|
|
if(devicemap.get(family).meta.supported) {
|
|
if (family == optionvalue) {
|
|
return html`<option value="${family}" selected>${familyTranslatedName}</option> `
|
|
}
|
|
else {
|
|
return html`<option value="${family}">${familyTranslatedName}</option> `
|
|
}
|
|
}
|
|
else {
|
|
return html`<option value="${family}" disabled>${familyTranslatedName}</option>`
|
|
}
|
|
})}
|
|
</select>
|
|
<br>
|
|
`;
|
|
}
|
|
|
|
|
|
|
|
getMediaPlayerEntityDropdown(optionValue){
|
|
if(['none'].includes(this._config.device_family)) {
|
|
this._config.entity = 'none';
|
|
this.configChanged;
|
|
return;
|
|
}
|
|
var mediaPlayerEntities = [];
|
|
var heading = '';
|
|
if(this._config.device_family == 'apple-tv') {
|
|
mediaPlayerEntities = this.getMediaPlayerEntitiesByPlatform('apple_tv');
|
|
heading = 'Apple TV Media Player '+ this.translateToUsrLang('Entity');
|
|
heading = this.hass.config.language == 'he' || this.hass.config.language == 'fr' ?
|
|
this.translateToUsrLang('Entity') + ' Apple TV Media Player' : 'Apple TV Media Player '+ this.translateToUsrLang('Entity');
|
|
}
|
|
else if(this._config.device_family == 'roku') {
|
|
mediaPlayerEntities = this.getMediaPlayerEntitiesByPlatform('roku');
|
|
heading = this.hass.config.language == 'he' || this.hass.config.language == 'fr' ?
|
|
this.translateToUsrLang('Entity') + ' Roku Media Player' : 'Roku Media Player '+ this.translateToUsrLang('Entity');
|
|
}
|
|
else {
|
|
mediaPlayerEntities = this.getMediaPlayerEntitiesByPlatform('androidtv');
|
|
heading = this.hass.config.language == 'he' || this.hass.config.language == 'fr' ?
|
|
this.translateToUsrLang('Entity') + ' Android Debug Bridge' : 'Android Debug Bridge '+ this.translateToUsrLang('Entity');
|
|
}
|
|
var blankEntity = '';
|
|
if(this._config.entity == '' || !(mediaPlayerEntities).includes(optionValue)) {
|
|
blankEntity = html `<option value="" selected> - - - - </option> `;
|
|
}
|
|
return html`
|
|
${heading}:<br>
|
|
<select name="entity" id="entity" style="padding: .6em; font-size: 1em;" .value="${optionValue}"
|
|
@focusout=${this.configChanged}
|
|
@change=${this.configChanged} >
|
|
${blankEntity}
|
|
${mediaPlayerEntities.map((eid) => {
|
|
if (eid != this._config.entity) {
|
|
return html`<option value="${eid}">${this.hass.states[eid].attributes.friendly_name || eid}</option> `;
|
|
}
|
|
else {
|
|
return html`<option value="${eid}" selected>${this.hass.states[eid].attributes.friendly_name || eid}</option> `;
|
|
}
|
|
})}
|
|
</select>
|
|
<br>
|
|
<br>`
|
|
}
|
|
|
|
|
|
getAssociatedRemoteEntityDropdown(optionValue){
|
|
if(['amazon-fire', 'none'].includes(this._config.device_family)) { return; }
|
|
var blankRemoteEntity = '';
|
|
var remoteEntities = [];
|
|
var appleTVRemoteEntities = this.getRemoteEntitiesByPlatform('apple_tv');
|
|
if(this._config.device_family == 'apple-tv') {
|
|
var dropdownLabel = this.translateToUsrLang('Associated') + ' Apple TV Remote ' + this.translateToUsrLang('Entity');
|
|
dropdownLabel = this.hass.config.language == 'he' ? 'ישות משויכת ל-' + 'Apple TV Remote ' : dropdownLabel;
|
|
if(this._config.apple_tv_remote_entity == '' || typeof this._config.apple_tv_remote_entity == 'undefined') {
|
|
blankRemoteEntity = html `<option value="" selected> - - - - </option> `;
|
|
}
|
|
remoteEntities = this.getRemoteEntitiesByPlatform('apple_tv');
|
|
return html`
|
|
${dropdownLabel}:<br>
|
|
<select name="apple_tv_remote_entity" id="apple_tv_remote_entity" style="padding: .6em; font-size: 1em;" .value=${optionValue}
|
|
@focusout=${this.configChanged}
|
|
@change=${this.configChanged} >
|
|
${blankRemoteEntity}
|
|
${remoteEntities.map((eid) => {
|
|
if (eid != this._config.apple_tv_remote_entity) {
|
|
return html`<option value="${eid}">${this.hass.states[eid].attributes.friendly_name || eid}</option> `;
|
|
}
|
|
else {
|
|
return html`<option value="${eid}" selected>${this.hass.states[eid].attributes.friendly_name || eid}</option> `;
|
|
}
|
|
})}
|
|
</select>
|
|
<br>
|
|
<br>`
|
|
}
|
|
if(this._config.device_family == 'roku') {
|
|
var dropdownLabel = this.translateToUsrLang('Associated') + ' Roku Remote ' + this.translateToUsrLang('Entity');
|
|
dropdownLabel = this.hass.config.language == 'he' ? 'ישות משויכת ל-' + 'Roku Remote ' : dropdownLabel;
|
|
if(this._config.roku_remote_entity == '' || typeof this._config.roku_remote_entity == 'undefined') {
|
|
blankRemoteEntity = html `<option value="" selected> - - - - </option> `;
|
|
}
|
|
remoteEntities = this.getRemoteEntitiesByPlatform('roku');
|
|
return html`
|
|
${dropdownLabel}:<br>
|
|
<select name="roku_remote_entity" id="roku_remote_entity" style="padding: .6em; font-size: 1em;" .value=${optionValue}
|
|
@focusout=${this.configChanged}
|
|
@change=${this.configChanged} >
|
|
${blankRemoteEntity}
|
|
${remoteEntities.map((eid) => {
|
|
if (eid != this._config.roku_remote_entity) {
|
|
return html`<option value="${eid}">${this.hass.states[eid].attributes.friendly_name || eid}</option> `;
|
|
}
|
|
else {
|
|
return html`<option value="${eid}" selected>${this.hass.states[eid].attributes.friendly_name || eid}</option> `;
|
|
}
|
|
})}
|
|
</select>
|
|
<br>
|
|
<br>`
|
|
}
|
|
else {
|
|
var dropdownLabel = this.translateToUsrLang('Associated') + ' Android TV Remote ' + this.translateToUsrLang('Entity') + ': (' + this.translateToUsrLang('optional') + ')';
|
|
dropdownLabel = this.hass.config.language == 'he' ? 'ישות משויכת ל-' + 'Android TV Remote ' : dropdownLabel;
|
|
dropdownLabel = this.hass.config.language == 'fr' ? 'Entité Android TV Remote Associé (optionnel)' : dropdownLabel;
|
|
if(this._config.androidTVRemoteEntity == '' || typeof this._config.androidTVRemoteEntity == 'undefined') {
|
|
blankRemoteEntity = html `<option value="" selected> - - - - </option> `;
|
|
}
|
|
remoteEntities = this.getRemoteEntitiesByPlatform('androidtv_remote');
|
|
return html`
|
|
${dropdownLabel}<br>
|
|
<select name="android_tv_remote_entity" id="android_tv_remote_entity" style="padding: .6em; font-size: 1em;" .value=${optionValue}
|
|
@focusout=${this.configChanged}
|
|
@change=${this.configChanged} >
|
|
${blankRemoteEntity}
|
|
${remoteEntities.map((eid) => {
|
|
if (eid != this._config.android_tv_remote_entity) {
|
|
return html`<option value="${eid}">${this.hass.states[eid].attributes.friendly_name || eid}</option> `;
|
|
}
|
|
else {
|
|
return html`<option value="${eid}" selected>${this.hass.states[eid].attributes.friendly_name || eid}</option> `;
|
|
}
|
|
})}
|
|
</select>
|
|
<br>
|
|
<br>`
|
|
}
|
|
}
|
|
|
|
|
|
getDeviceTypeDropdown(optionValue, dropdownLabel){
|
|
if (this._config.device_family === 'none') {
|
|
this._config.device_type = 'other';
|
|
this._config.entity = 'none';
|
|
delete this._config['apple_tv_remote_entity'];
|
|
delete this._config['android_tv_remote_entity'];
|
|
this.configChanged;
|
|
return;
|
|
}
|
|
var family = this._config.device_family;
|
|
var optionMenu = String();
|
|
Object.entries(devices).forEach(deviceFamily => {
|
|
const [familyKey,familyValue] = deviceFamily;
|
|
if(familyKey == family) {
|
|
var blankWasDisplayed = false;
|
|
Object.entries(familyValue).forEach(deviceCategory => {
|
|
const [categorykey,categoryvalue] = deviceCategory;
|
|
if(categorykey == 'meta') {return}
|
|
if(optionValue in categoryvalue) {blankWasDisplayed = true}
|
|
if(!(optionValue in categoryvalue) && !(blankWasDisplayed)){
|
|
optionMenu += '<option value="" selected disabled> - - - choose one - - - </option>';
|
|
blankWasDisplayed = true;
|
|
}
|
|
if(categorykey != 'noCategory'){optionMenu += '<optgroup label="'+ categorykey + '">'}
|
|
Object.entries(categoryvalue).forEach(deviceEntry => {
|
|
const [devicekey,deviceproperties] = deviceEntry;
|
|
if(deviceproperties.supported) {
|
|
if(devicekey == this._config.device_type) {
|
|
optionMenu += '<option value="'+ devicekey +'" selected>'+ deviceproperties.friendlyName +'</option>';
|
|
}
|
|
else {
|
|
optionMenu += '<option value="'+ devicekey +'">'+ deviceproperties.friendlyName +'</option>';
|
|
}
|
|
}
|
|
else {
|
|
optionMenu += '<option value="'+ devicekey +'" disabled>'+ deviceproperties.friendlyName +'</option>';
|
|
}
|
|
})
|
|
if(categorykey != 'noCategory'){optionMenu += '</optgroup>'}
|
|
})
|
|
}
|
|
})
|
|
return html `
|
|
${dropdownLabel}:<br>
|
|
<select name="device_type" id="device_type" style="padding: .6em; font-size: 1em;"
|
|
.value=${this._config.device_type}
|
|
@focusout=${this.configChanged}
|
|
@change=${this.configChanged}
|
|
>
|
|
${unsafeHTML(optionMenu)}
|
|
</select>
|
|
<br>
|
|
<br>
|
|
`;
|
|
}
|
|
|
|
|
|
getCompatibilityModeDropdown(optionValue, deviceFriendlyName){
|
|
if(['apple-tv', 'chromecast', 'homatics', 'nvidia-shield', 'onn', 'roku', 'none'].includes(this._config.device_family)) { return; }
|
|
if(['xiaomi-tv-stick-4k', 'fire_tv_stick_4k_max_second_gen', 'fire_tv_stick_4k_second_gen'].includes(this._config.device_type)) { return; }
|
|
var heading = this.translateToUsrLang('Compatibility Mode');
|
|
return html`
|
|
${heading}:<br>
|
|
<select name="compatibility_mode" id="compatibility_mode" style="padding: .6em; font-size: 1em;"
|
|
.value=${optionValue}
|
|
@focusout=${this.configChanged}
|
|
@change=${this.configChanged}
|
|
>
|
|
<option value="default">${this.translateToUsrLang('Default for')} ${deviceFriendlyName}</option>
|
|
<option value="strong">${this.translateToUsrLang('Strong (Slower)')}</option>
|
|
<option value="event0">event0</option>
|
|
<option value="event1">event1</option>
|
|
<option value="event2">event2</option>
|
|
<option value="event3">event3</option>
|
|
<option value="event4">event4</option>
|
|
<option value="event5">event5</option>
|
|
<option value="event6">event6</option>
|
|
<option value="event7">event7</option>
|
|
<option value="event8">event8</option>
|
|
<option value="event9">event9</option>
|
|
<option value="event10">event10</option>
|
|
<option value="event11">event11</option>
|
|
<option value="event12">event12</option>
|
|
<option value="event13">event13</option>
|
|
</select>
|
|
<br>
|
|
<br>
|
|
`;
|
|
}
|
|
|
|
|
|
getAppChoiceOptionMenus(remoteStyle) {
|
|
if(['none'].includes(this._config.device_family)) { return; }
|
|
var family = this._config.device_family;
|
|
if(appButtonMax[remoteStyle]) {
|
|
var appkeys = [];
|
|
for (var [key, value] of appmap.entries()) {
|
|
appkeys.push(key)
|
|
}
|
|
const optionsmap = new Map();
|
|
for(let i=1; i<=appButtonMax[remoteStyle]; i++) {
|
|
optionsmap.set(i, "app_launch_"+i);
|
|
}
|
|
var optionkeys = [];
|
|
for (var [key, value] of optionsmap.entries()) {
|
|
optionkeys.push(key)
|
|
}
|
|
|
|
return html `
|
|
<br>
|
|
${optionkeys.map((optionnumber) => {
|
|
var blankOption = html `<option value=""> - - - - </option>`;
|
|
if(!(appmap.has(optionvalue))){
|
|
blankOption = html `<option value="" selected> - - - - </option>`;
|
|
}
|
|
var heading = this.translateToUsrLang('App Launch Button');
|
|
var optionvalue = this._config[optionsmap.get(optionnumber)];
|
|
return html `
|
|
${heading} ${optionnumber}:
|
|
<select name="app_launch_${optionnumber}" id="app_launch_${optionnumber}" style="padding: .6em; font-size: 1em;"
|
|
.value=${optionvalue}
|
|
@focusout=${this.configChanged}
|
|
@change=${this.configChanged}
|
|
>
|
|
${blankOption}
|
|
${appkeys.map((app) => {
|
|
var userLanguageAppName = this.translateToUsrLang(appmap.get(app).friendlyName);
|
|
if ((appmap.get(app).deviceFamily && appmap.get(app).deviceFamily.includes(family)) || !(appmap.get(app).deviceFamily)) {
|
|
if (app != optionvalue) {
|
|
return html`<option value="${app}">${userLanguageAppName}</option> `
|
|
}
|
|
else {
|
|
return html`<option value="${app}" selected>${userLanguageAppName}</option> `
|
|
}
|
|
}
|
|
})}
|
|
</select>
|
|
<br>
|
|
`;
|
|
})}
|
|
`;
|
|
}
|
|
}
|
|
|
|
getALConfigOptions(remoteStyle){
|
|
if(remoteStyle && remoteStyle=="AL1"){
|
|
return html `
|
|
<label for="useCustomSkinCheckbox">
|
|
<input type="checkbox" id="useCustomSkinCheckbox" name="useCustomSkin" ?checked=${this._config.useCustomSkin===true} @change=${this.configChanged}>
|
|
${this.translateToUsrLang('Custom Remote Skin')}: <input type="color" name="skin" id="skin" .value=${this._config.skin || '#4682b4'} @change=${this.configChanged}>
|
|
</label>
|
|
<br><br><hr><br>
|
|
`;
|
|
}
|
|
if(remoteStyle && remoteStyle=="AL2"){
|
|
return html `
|
|
<label for="hideFramesCheckbox">
|
|
<input type="checkbox" id="hideFramesCheckbox" name="hide_button_group_frame" ?checked=${this._config.hide_button_group_frame===true} @change=${this.configChanged}>
|
|
${this.translateToUsrLang('Hide frames around button groups')}
|
|
</label>
|
|
<br><br>
|
|
<label for="useCustomSkinCheckbox">
|
|
<input type="checkbox" id="useCustomSkinCheckbox" name="useCustomSkin" ?checked=${this._config.useCustomSkin===true} @change=${this.configChanged}>
|
|
${this.translateToUsrLang('Custom Remote Skin')}: <input type="color" name="skin" id="skin" .value=${this._config.skin || '#4682b4'} @change=${this.configChanged}>
|
|
</label>
|
|
<br><br>
|
|
${this.translateToUsrLang('DPad Style')}:
|
|
<select name="dpad_style" id="dpad_style}" style="padding: .6em; font-size: 1em;"
|
|
.value=${this._config.dpad_style || ''}
|
|
@focusout=${this.configChanged}
|
|
@change=${this.configChanged}
|
|
>
|
|
<option value="amazon-fire">Amazon Fire</option>
|
|
<option value="apple-tv-black">Apple TV ${this.translateToUsrLang('black')}</option>
|
|
<option value="apple-tv-silver">Apple TV ${this.translateToUsrLang('silver')}</option>
|
|
<option value="chromecast">Chromecast</option>
|
|
<option value="xiaomi">Xiaomi</option>
|
|
<option value="minimal">${this.translateToUsrLang('Minimal')}</option>
|
|
</select>
|
|
<br><br><hr><br>
|
|
`;
|
|
}
|
|
}
|
|
|
|
getChromecastMediaControls(remoteStyle) {
|
|
if (['CC1', 'CC2', 'CC3'].includes(remoteStyle)) {
|
|
return html`
|
|
<label for="showMediaControlsCheckbox">
|
|
<input type="checkbox" id="showMediaControlsCheckbox" name="show_media_controls"
|
|
?checked=${this._config.show_media_controls === true} @change=${this.configChanged}> ${this.translateToUsrLang("Show Media Controls")}
|
|
</label>
|
|
<br>`;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (!this.hass || !this._config) {
|
|
return html``;
|
|
}
|
|
|
|
if(!this._config.device_family) {
|
|
this._config.device_family = devicemap.keys().next().value;
|
|
}
|
|
|
|
var appLauncherRelativeScaleSlide = '';
|
|
if(this._config.defaultRemoteStyle_override == 'AL2') {
|
|
if(!(this._config.app_launcher_relative_size)) {
|
|
this._config.app_launcher_relative_size = 0;
|
|
}
|
|
appLauncherRelativeScaleSlide = html `
|
|
<br>
|
|
<label for="relativefader">${this.translateToUsrLang('App Launcher Relative Scale')}:
|
|
<input type="range" min="-25" max="75" .value=${this._config.app_launcher_relative_size} id="app_launcher_relative_size" name="app_launcher_relative_size" @change=${this.configChanged} style="width: 40ch;">
|
|
</label>
|
|
<br>`;
|
|
}
|
|
|
|
// Get current device's Attributes AND use any applicable overrides from user conf
|
|
var confRef = this._config;
|
|
function getDeviceAttribute(deviceAttribute){
|
|
return deviceAttributeQuery(deviceAttribute, confRef);
|
|
}
|
|
|
|
// Rebuild AppMap - allow hdmi inputs where appropriate & add configured custom launchers from YAML
|
|
refreshAppMap(this._config, getDeviceAttribute('hdmiInputs'), getDeviceAttribute('avInputs'), getDeviceAttribute('tuner'));
|
|
|
|
var deviceModelSelectorLabel = devicemap.get(this._config.device_family).meta.friendlyName + ' ' + this.translateToUsrLang('Device Model');
|
|
if (this.hass.config.language == 'he') {
|
|
deviceModelSelectorLabel = this.translateToUsrLang('Device Model') + ' ' + devicemap.get(this._config.device_family).meta.friendlyName;
|
|
}
|
|
|
|
if(this._config.device_type == null || this._config.device_type == '') {
|
|
return html`
|
|
${this.translateToUsrLang('Device Family')}: <br>
|
|
${this.getDeviceFamiliesDropdown(this._config.device_family)}
|
|
<br>
|
|
|
|
${this.getDeviceTypeDropdown(this._config.device_type, deviceModelSelectorLabel)}`;
|
|
}
|
|
else {
|
|
|
|
return html`
|
|
${this.translateToUsrLang('Device Family')}: <br>
|
|
${this.getDeviceFamiliesDropdown(this._config.device_family)}
|
|
<br>
|
|
|
|
${this.getDeviceTypeDropdown(this._config.device_type, deviceModelSelectorLabel)}
|
|
|
|
${this.getMediaPlayerEntityDropdown(this._config.entity)}
|
|
|
|
${this.getAssociatedRemoteEntityDropdown(this._config.android_tv_remote_entity)}
|
|
|
|
<hr>
|
|
|
|
<br>
|
|
<label for="fader">${this.translateToUsrLang('Scale')}:
|
|
<input type="range" min="20" max="120" .value=${this._config.scale} id="scale" name="scale" @change=${this.configChanged} style="width: 40ch;">
|
|
</label>
|
|
<br>
|
|
${appLauncherRelativeScaleSlide}
|
|
|
|
<br>
|
|
${this.translateToUsrLang('Remote Style')}:<br>
|
|
<select name="defaultRemoteStyle_override" id="defaultRemoteStyle_override" style="padding: .6em; font-size: 1em;"
|
|
.value=${this._config.defaultRemoteStyle_override || ''}
|
|
@focusout=${this.configChanged}
|
|
@change=${this.configChanged}
|
|
>
|
|
<option value="">${this.translateToUsrLang('Default for')} ${getDeviceAttribute('friendlyName')}</option>
|
|
<option value="AF1">Amazon Fire ${this.translateToUsrLang('style')} 1</option>
|
|
<option value="AF2">Amazon Fire ${this.translateToUsrLang('style')} 2</option>
|
|
<option value="AF3">Amazon Fire ${this.translateToUsrLang('style')} 3</option>
|
|
<option value="AF4">Amazon Fire ${this.translateToUsrLang('style')} 4</option>
|
|
<option value="AF5">Amazon Fire ${this.translateToUsrLang('style')} 5</option>
|
|
<option value="AF6">Amazon Fire ${this.translateToUsrLang('style')} 6</option>
|
|
<option value="AFJTV">Amazon Fire JVC TV</option>
|
|
<option value="AFXF2">Amazon Fire Xiaomi F2</option>
|
|
<option value="AR1">Apple TV ${this.translateToUsrLang('remote style')} 1</option>
|
|
<option value="AR2">Apple TV ${this.translateToUsrLang('remote style')} 2</option>
|
|
<option value="AR3">Apple TV ${this.translateToUsrLang('remote style')} 3</option>
|
|
<option value="CC1">Chromecast (snow)</option>
|
|
<option value="CC2">Chromecast (sky)</option>
|
|
<option value="CC3">Chromecast (sunrise)</option>
|
|
<option value="HO1">Homatics ${this.translateToUsrLang('style')} 1</option>
|
|
<option value="HO2">Homatics ${this.translateToUsrLang('style')} 2</option>
|
|
<option value="HO3">Homatics ${this.translateToUsrLang('style')} 3</option>
|
|
<option value="HO4">Homatics ${this.translateToUsrLang('style')} 4</option>
|
|
<option value="NS1">NVIDIA Shield ${this.translateToUsrLang('style')} 1</option>
|
|
<option value="NS2">NVIDIA Shield ${this.translateToUsrLang('style')} 2</option>
|
|
<option value="ON1">onn. ${this.translateToUsrLang('style')} 1</option>
|
|
<option value="ON2">onn. ${this.translateToUsrLang('style')} 2</option>
|
|
<option value="RVRP">Roku Voice ${this.translateToUsrLang('remote')} Pro</option>
|
|
<option value="RVR">Roku Voice ${this.translateToUsrLang('remote')}</option>
|
|
<option value="RSR">Roku Simple ${this.translateToUsrLang('remote')}</option>
|
|
<option value="RHR">Hisense Roku TV ${this.translateToUsrLang('remote')}</option>
|
|
<option value="RTR">TCL Roku TV ${this.translateToUsrLang('remote')}</option>
|
|
<option value="RWR">Westinghouse Roku TV ${this.translateToUsrLang('remote')}</option>
|
|
<option value="XM1">Xiaomi Mi ${this.translateToUsrLang('style')} 1</option>
|
|
<option value="XM2">Xiaomi Mi ${this.translateToUsrLang('style')} 2</option>
|
|
<option value="AL1">${this.translateToUsrLang('App Launcher')} 1</option>
|
|
<option value="AL2">${this.translateToUsrLang('App Launcher')} 2</option>
|
|
</select>
|
|
<br>
|
|
<br>
|
|
${this.getChromecastMediaControls(getDeviceAttribute("defaultRemoteStyle"))}
|
|
|
|
${this.getCompatibilityModeDropdown(this._config.compatibility_mode, getDeviceAttribute('friendlyName'))}
|
|
|
|
${this.getAppChoiceOptionMenus(getDeviceAttribute("defaultRemoteStyle"))}
|
|
<br>
|
|
<hr>
|
|
<br>
|
|
${this.getALConfigOptions(getDeviceAttribute("defaultRemoteStyle"))}
|
|
|
|
<label for="visible_name_text">${this.translateToUsrLang('Visible Device Name')}:<br>
|
|
<input type="text" maxlength="15" .value=${ this._config.visible_name_text || ''} id="visible_name_text" name="visible_name_text" @change=${this.configChanged} @focusout=${this.configChanged} @keyup=${this.configChanged} style="padding: .6em; font-size: 1em; width: 10rem;">
|
|
</label>
|
|
<br>
|
|
<br>
|
|
${this.translateToUsrLang('Name Position')}:<br>
|
|
<select name="name_position" id="name_position" .value=${this._config.name_position || 'hidden'} @focusout=${this.configChanged} @change=${this.configChanged} style="padding: .6em; font-size: 1em;">
|
|
<option value="hidden" selected>${this.translateToUsrLang('hidden')}</option>
|
|
<option value="top">${this.translateToUsrLang('top')}</option>
|
|
<option value="bottom">${this.translateToUsrLang('bottom')}</option>
|
|
</select><br>
|
|
<br>
|
|
<label for="visible_name_text_color">${this.translateToUsrLang('Device Name Text Color')}:<br><input type="color" name="visible_name_text_color" id="visible_name_text_color" .value=${this._config.visible_name_text_color || '#000000'} @change=${this.configChanged}></label>
|
|
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("firemote-card-editor", FiremoteCardEditor);
|