node-red-contrib-apple-tv-x
Version:
Nodes for controlling Apple TVs in Node-RED (wrapper pyatv)
163 lines (142 loc) • 6.87 kB
HTML
<script type="text/html" data-template-name="atvx-config">
<div class="form-row">
<label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-config-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-config-input-backend"><i class="fa fa-pencil"></i> Backend</label>
<select id="node-config-input-backend" style="width: 70%;">
<option value="pyatv-cli">pyatv (cli)</option>
<!-- <option value="pyatv-api" disabled>pyatv (api-json)</option> -->
</select>
</div>
<div class="form-row" id="support-pyatv-cli" style="display: none;">
<label for="node-config-input-path"><i class="fa fa-folder"></i> Path</label>
<input type="text" id="node-config-input-path" placeholder="/home/pyatv/.local/bin">
</div>
<div class="form-row" id="support-pyatv-api" style="display: none;">
<label for="node-config-input-url"><i class="fa fa-globe"></i> Url</label>
<input type="text" id="node-config-input-url" placeholder="http://pyatv.local:8080">
</div>
<div class="form-row">
<label for="node-config-input-identifier"><i class="fa fa-tv"></i> Apple TV</label>
<div style="display: inline-block; position: relative; width: 70%; height: 20px;">
<div style="position: absolute; left: 0; right: 42px;">
<input type="text" id="node-config-input-identifier" style="width: 100%;" placeholder="Identifier or Host">
</div>
<a id="node-config-input-scan" class="editor-button" style="position: absolute; right: 0; top: 0; width: 32px;"><i class="fa fa-search"></i></a>
</div>
</div>
<div class="form-row">
<label for="node-config-input-companion"><i class="fa fa-key"></i> Companion</label>
<input type="text" id="node-config-input-companion" placeholder="Credentials">
</div>
<div class="form-row">
<label for="node-config-input-airplay"><i class="fa fa-key"></i> AirPlay</label>
<input type="text" id="node-config-input-airplay" placeholder="Credentials">
</div>
<div class="form-row">
<label for="node-config-input-debug"><i class="fa fa-share-square"></i> Debug</label>
<input type="checkbox" id="node-config-input-debug" style="display: inline-block; width: auto; vertical-align: top;">
</div>
</script>
<script type="text/x-red" data-help-name="atvx-config">
<p>Setting for pyatv</p>
<h3>Configuration</h3>
<dl class="message-properties">
<dt class="optional">Name <span class="property-type">string</span></dt><dd>Choose any name to identify your node</dd>
<dt class="required">Backend <span class="property-type">string</span></dt><dd>Select backend for pyatv</dd>
<dt class="optional">Path <span class="property-type">string</span></dt><dd>Path where custom pyatv (Optional)</dd>
<dt class="required">Url <span class="property-type">string</span></dt><dd>Url where api-json pyatv</dd>
<dt class="required">Apple TV <span class="property-type">string</span></dt><dd>Choose Apple TV</dd>
<dt class="required">Companion <span class="property-type">string</span></dt><dd>Credentials Companion for Apple TV</dd>
<dt class="required">AirPlay <span class="property-type">string</span></dt><dd>Credentials AirPlay for Apple TV</dd>
<dt class="optional">Debug <span class="property-type">string</span></dt><dd>Debug for pyatv</dd>
</dl>
</script>
<script type="text/javascript">
RED.nodes.registerType("atvx-config", {
category: "config",
paletteLabel: "config",
defaults: {
name: {},
backend: { value: "pyatv-cli" },
debug: { value: false },
path: {}, //pyatv-cli
url: {}, //pyatv-api
},
credentials: {
identifier: { required: true },
companion: { required: true },
airplay: { required: true },
},
label: function () {
return (this.name || "Apple TV");
},
oneditprepare: function () {
function toggleBackend() {
$("[id^=support-pyatv]").hide();
$("#support-" + $("#node-config-input-backend option:selected").val()).show();
}
function toggleSelect() {
var $val = $("#node-config-input-identifier").val();
$("#node-config-input-scan").html(`<i class="fa fa-search"></i>`);
$("#node-config-input-identifier").off("change");
$("#node-config-input-identifier").replaceWith(`<input type="text" id="node-config-input-identifier" style="width: 100%;">`);
$("#node-config-input-identifier").val($val);
}
function toggleInput() {
var $val = $("#node-config-input-identifier").val();
RED.notify(`Scan Apple TV devices ...`);
$("#node-config-input-identifier").prop("disabled", true);
$.getJSON("atvx/scan", {
backend: $("#node-config-input-backend").val(),
path: $("#node-config-input-path").val(),
url: $("#node-config-input-url").val(),
debug: $("#node-config-input-debug").is(":checked"),
}).done(function (devices) {
if (devices.length === 0) {
RED.notify(`No Apple TV devices found`, "error");
$("#node-config-input-identifier").prop("disabled", false);
return;
}
if (typeof devices.error !== "undefined") {
RED.notify(devices.error, "error");
$("#node-config-input-identifier").prop("disabled", false);
return;
}
$("#node-config-input-scan").html(`<i class="fa fa-i-cursor"></i>`);
$("#node-config-input-identifier").replaceWith(`<select id="node-config-input-identifier" style="width: 100%;"></select>`);
devices.forEach(function(device) {
$("#node-config-input-identifier").append(`<option value="${device.identifier}" data-host="${device.host}" data-name="${device.name}" data-identifier="${device.identifier}">${device.name} (${device.identifier})</option>`);
});
$("#node-config-input-identifier").on("change", changeName);
if (devices.length === 1) {
$val = devices[0].identifier;
}
$("#node-config-input-identifier").val($val);
$("#node-config-input-identifier").prop("disabled", false);
if (devices.length === 1) {
changeName();
}
});
}
function changeName() {
$("#node-config-input-name").val($("#node-config-input-identifier option:selected").data("name"));
}
$("#node-config-input-scan").click(function() {
if ($("#node-config-input-identifier").prop("tagName") === "INPUT") {
toggleInput();
} else {
toggleSelect();
}
});
setTimeout(function () {
toggleBackend();
}, 150);
$("#node-config-input-backend").change(function(){
toggleBackend();
});
}
});
</script>