stagehacks/Cue-View
1
0
Fork 0
mirror of https://github.com/stagehacks/Cue-View.git synced 2026-08-06 22:33:39 +00:00
Code Issues Packages Projects Releases 9 Wiki Activity

pretty src directory

Browse Source
This commit is contained in:
Joel Wetzell
2022-12-12 14:54:24 -06:00
parent c5cc0b4bea
commit 29bdf40ffb
6 changed files with 138 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+4 -4
View File
@@ -118,13 +118,13 @@ a {
width: 210px;
pointer-events: none;
}
#device-inspector{
#device-inspector {
position: absolute;
bottom: 0px;
width: 100%;
}
#device-tools {
/* position: absolute;
/* position: absolute;
bottom: 210px;
left: 0px;*/
width: 100%;
@@ -265,7 +265,7 @@ input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input:disabled{
input:disabled {
color: gray;
cursor: not-allowed;
}
@@ -341,6 +341,6 @@ select.button:focus {
}
/* only allow select on input fields */
body :not(input):not(select):not(textarea) {
body :not(input):not(select):not(textarea) {
user-select: none;
}
src/index.js
+1 -1
View File
@@ -1 +1 @@
window.init();
window.init();
src/plugins.js
+25 -29
View File
@@ -10,20 +10,20 @@ const allPlugins = {};
module.exports.all = allPlugins;
module.exports.init = function init(callback) {
let pluginDirectoryPath = path.normalize(path.join(__dirname, `../plugins`));
console.log(`Loading plugin files... ${pluginDirectoryPath}`);
fs.readdir(pluginDirectoryPath, (err, files) => {
files.forEach((plugin)=>{
files.forEach((plugin) => {
if (plugin[0] !== '.') {
console.log(`${plugin} started`);
// eslint-disable-next-line import/no-dynamic-require
allPlugins[plugin] = require(path.join(pluginDirectoryPath, `/${plugin}/main.js`));
allPlugins[plugin] = require(path.join(
pluginDirectoryPath,
`/${plugin}/main.js`
));
const p = allPlugins[plugin];
@@ -35,50 +35,46 @@ module.exports.init = function init(callback) {
};
p.template = _.template(
fs.readFileSync(path.join(pluginDirectoryPath, `/${plugin}/template.ejs`),
fs.readFileSync(
path.join(pluginDirectoryPath, `/${plugin}/template.ejs`),
'utf8'
)
);
p.info = _.template(
fs.readFileSync(path.join(pluginDirectoryPath, `/${plugin}/info.html`),
fs.readFileSync(
path.join(pluginDirectoryPath, `/${plugin}/info.html`),
'utf8'
)
);
//if (p.heartbeatTimeout === undefined || p.heartbeatTimeout < 50) {
if(p.config.heartbeatTimeout){
p.heartbeatTimeout = p.config.heartbeatInterval * 1.5;
}else{
p.heartbeatTimeout = 10000;
}
if (p.config.heartbeatTimeout) {
p.heartbeatTimeout = p.config.heartbeatInterval * 1.5;
} else {
p.heartbeatTimeout = 10000;
}
//}
if(p.config.heartbeatInterval){
p.heartbeatInterval = Math.max(50, p.config.heartbeatInterval);
}else{
p.heartbeatInterval = 5000;
}
// p.fields = {};
// if(p.config.fields){
// p.config.fields.forEach(field => {
// p.fields[field.key] = field.value;
// });
// }
if (p.config.heartbeatInterval) {
p.heartbeatInterval = Math.max(50, p.config.heartbeatInterval);
} else {
p.heartbeatInterval = 5000;
}
// p.fields = {};
// if(p.config.fields){
// p.config.fields.forEach(field => {
// p.fields[field.key] = field.value;
// });
// }
// if (p.heartbeatInterval === undefined || p.heartbeatInterval < 50) {
// p.heartbeatInterval = 5000;
// }
}
});
callback();
});
};
src/saveSlots.js
+5 -13
View File
@@ -19,7 +19,7 @@ function loadSlot(slotIndex) {
VIEW.toggleSlotButtons(slotIndex);
activeSlot = slotIndex;
Object.keys(DEVICE.all).forEach((d)=>{
Object.keys(DEVICE.all).forEach((d) => {
DEVICE.changePinIndex(DEVICE.all[d], false);
});
VIEW.resetPinned();
@@ -33,7 +33,6 @@ function loadSlot(slotIndex) {
if (device.id === savedDevice.id) {
VIEW.pinDevice(device);
VIEW.switchDevice(device.id);
} else if (
device.addresses[0] === savedDevice.addresses[0] &&
device.type === savedDevice.type &&
@@ -43,12 +42,10 @@ function loadSlot(slotIndex) {
VIEW.switchDevice(device.id);
}
});
});
};
}
module.exports.loadSlot = loadSlot;
module.exports.loadDevices = function loadDevices() {
console.log(`Loading ${savedDevices.length} saved devices...`);
@@ -60,12 +57,11 @@ module.exports.loadDevices = function loadDevices() {
port: savedDevices[i].port,
addresses: savedDevices[i].addresses,
id: savedDevices[i].id,
fields: savedDevices[i].fields
fields: savedDevices[i].fields,
});
}
};
module.exports.saveAll = function saveAll() {
console.log('Saving...');
const currentPins = VIEW.getPinnedDevices();
@@ -75,7 +71,7 @@ module.exports.saveAll = function saveAll() {
savedSlots[activeSlot][i] = {
addresses: currentPins[i].addresses,
type: currentPins[i].type,
id: currentPins[i].id
id: currentPins[i].id,
};
}
localStorage.setItem('savedSlots', JSON.stringify(savedSlots));
@@ -94,15 +90,13 @@ module.exports.saveAll = function saveAll() {
defaultName: device.defaultName,
port: device.port,
id: device.id,
fields: device.fields
fields: device.fields,
};
i++;
});
localStorage.setItem('savedDevices', JSON.stringify(savedDevices));
};
module.exports.deleteFromSlots = function deleteFromSlots(device) {
for (let i = 1; i <= 3; i++) {
console.log(savedSlots);
@@ -114,12 +108,10 @@ module.exports.deleteFromSlots = function deleteFromSlots(device) {
}
};
module.exports.reloadActiveSlot = function reloadActiveSlot() {
loadSlot(activeSlot);
};
module.exports.resetSlots = function resetSlots() {
localStorage.clear();
};
src/search.js
+32 -38
View File
@@ -15,13 +15,17 @@ let allServers = false;
function getServers() {
const interfaces = os.networkInterfaces();
const result = [];
Object.keys(interfaces).forEach((key) => {
const addresses = interfaces[key];
for (let i = addresses.length; i--; ) {
const address = addresses[i];
if (address.family === 'IPv4' && !address.internal && address.address.substring(0, 3)!="169") {
if (
address.family === 'IPv4' &&
!address.internal &&
address.address.substring(0, 3) != '169'
) {
const subnet = ip.subnet(address.address, address.netmask);
let current = ip.toLong(subnet.firstAddress);
const last = ip.toLong(subnet.lastAddress) - 1;
@@ -31,7 +35,6 @@ function getServers() {
}
});
return result;
}
const searchSockets = [];
@@ -43,9 +46,9 @@ function searchAll() {
ipcRenderer.send('disableSearchAll', '');
document.getElementById('search-button').style.opacity = 0.2;
// Removed this block to fix #21
// Removed this block to fix #21
// "After adding devices via search, searching again leaves all devices stuck in reload state"
//
//
// Object.keys(DEVICE.all).forEach((i) => {
// DEVICE.infoUpdate(DEVICE.all[i], 'status', 'refresh');
// });
@@ -63,26 +66,21 @@ function searchAll() {
Object.keys(PLUGINS.all).forEach((p) => {
const plugin = PLUGINS.all[p];
try {
const t = plugin.config.searchOptions.type;
if(t === 'TCPport'){
if (t === 'TCPport') {
if (TCPFlag) {
searchTCP(p, plugin.config);
}
}else if(t === 'Bonjour'){
} else if (t === 'Bonjour') {
searchBonjour(p, plugin.config);
}else if(t === 'UDPsocket'){
} else if (t === 'UDPsocket') {
searchUDP(p, plugin.config);
}else if(t === 'multicast'){
} else if (t === 'multicast') {
searchMulticast(p, plugin.config);
}
} catch (err) {
console.error(`Unable to search for plugin ${p}`);
}
@@ -102,14 +100,11 @@ function searchAll() {
ipcRenderer.send('enableSearchAll', '');
}, 10000);
};
}
module.exports.searchAll = searchAll;
function searchBonjour(pluginType, plugin) {
bonjour.find({ type: plugin.searchOptions.bonjourName }, (e) => {
const validAddresses = [];
e.addresses.forEach((address) => {
if (address.indexOf(':') === -1) {
@@ -124,20 +119,22 @@ function searchBonjour(pluginType, plugin) {
addresses: validAddresses,
});
});
};
}
function searchTCP(pluginType, plugin) {
for (let i = 0; i < allServers.length; i++) {
TCPtest(allServers[i], pluginType, plugin);
}
};
}
function TCPtest(ipAddr, pluginType, plugin) {
const client = net.createConnection(plugin.searchOptions.testPort, ipAddr, () => {
client.write(plugin.searchOptions.searchBuffer);
});
const client = net.createConnection(
plugin.searchOptions.testPort,
ipAddr,
() => {
client.write(plugin.searchOptions.searchBuffer);
}
);
client.on('data', (data) => {
if (plugin.searchOptions.validateResponse(data)) {
DEVICE.registerDevice({
@@ -152,14 +149,12 @@ function TCPtest(ipAddr, pluginType, plugin) {
client.on('error', (err) => {
// no device here
});
};
}
function searchUDP(pluginType, plugin) {
const i = searchSockets.push(dgram.createSocket('udp4')) - 1;
searchSockets[i].bind(plugin.searchOptions.listenPort, () => {
// searchSockets[i].send(
// plugin.searchOptions.searchBuffer,
// plugin.searchOptions.devicePort,
@@ -205,16 +200,15 @@ function searchUDP(pluginType, plugin) {
searchSockets[i].on('listening', () => {
searchSockets[i].setBroadcast(true);
searchSockets[i].send(
plugin.searchOptions.searchBuffer,
plugin.searchOptions.devicePort,
'255.255.255.255',
(err) => {
// console.log(err)
}
);
plugin.searchOptions.searchBuffer,
plugin.searchOptions.devicePort,
'255.255.255.255',
(err) => {
// console.log(err)
}
);
});
};
}
function searchMulticast(pluginType, plugin) {
const socket = dgram.createSocket('udp4');
src/view.js
+71 -68
View File
@@ -12,9 +12,7 @@ module.exports.init = function init() {
populatePluginLists();
};
function drawDeviceFrame(id) {
const $deviceDrawArea = document.getElementById(`device-${id}-draw-area`);
const $devicePinned = document.getElementById(`device-${id}-pinned`);
@@ -30,7 +28,8 @@ function drawDeviceFrame(id) {
// scrollbar styles are inline to prevent the styles flickering in
str += '<style>';
str += '::-webkit-scrollbar {background-color: black;width: 12px;}';
str += '::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background-color: #2b2b2b;}';
str +=
'::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background-color: #2b2b2b;}';
str +=
'::-webkit-scrollbar-thumb {background-color: #6b6b6b;border-radius: 16px;border: 3px solid #2b2b2b;}';
str += '::-webkit-scrollbar-button {display:none;}';
@@ -51,7 +50,6 @@ function drawDeviceFrame(id) {
$deviceDrawArea.contentWindow.document.write(str);
$deviceDrawArea.contentWindow.document.close();
if (d.pinIndex) {
$devicePinned.style.display = 'block';
} else {
@@ -59,62 +57,60 @@ function drawDeviceFrame(id) {
}
return true;
}
};
function generateBodyHTML(d){
let str = "";
function generateBodyHTML(d) {
let str = '';
if (d.status === 'ok') {
try {
str += PLUGINS.all[d.type].template({
data: d.data,
listName: (d.displayName || d.defaultName)
listName: d.displayName || d.defaultName,
});
} catch (err) {
console.log(err);
str += '<h3>Plugin Template Error</h3>';
}
} else {
str += `<header><h1>${(d.displayName || d.defaultName)}</h1></header>`;
str += `<header><h1>${d.displayName || d.defaultName}</h1></header>`;
str += "<div class='not-responding'>";
str += `<h2><em>${d.type}</em> is not responding to requests for data.</h2>`;
str += `<h3>IP <em>${d.addresses[0]}</em></h3>`;
str += `<h3>Port <em>${d.port}</em></h3>`;
str += '<hr></div>';
str += `<div class="device-info">${PLUGINS.all[d.type].info()}<div>`;
}
return str;
}
module.exports.draw = function draw(device) {
const d = device;
const $deviceDrawArea = document.getElementById(`device-${d.id}-draw-area`);
if($deviceDrawArea){
const scriptEl = $deviceDrawArea.contentWindow.document.createRange().createContextualFragment(generateBodyHTML(d));
if ($deviceDrawArea) {
const scriptEl = $deviceDrawArea.contentWindow.document
.createRange()
.createContextualFragment(generateBodyHTML(d));
$deviceDrawArea.contentWindow.document.body.replaceChildren(scriptEl);
}else{
} else {
drawDeviceFrame(d.id);
}
d.drawn = true;
};
module.exports.update = function update(device, type, data){
module.exports.update = function update(device, type, data) {
const doc = document.getElementById(`device-${device.id}-draw-area`);
if(doc){
PLUGINS.all[device.type].update(device, doc.contentWindow.document, type, data);
if (doc) {
PLUGINS.all[device.type].update(
device,
doc.contentWindow.document,
type,
data
);
}
}
};
module.exports.addDeviceToList = function addDeviceToList(device) {
const d = device;
@@ -135,21 +131,20 @@ module.exports.addDeviceToList = function addDeviceToList(device) {
if (elem == null) {
document
.getElementById('device-list')
.insertAdjacentHTML('beforeend', `<a class='device' id='${d.id}'>${html}</a>`);
.insertAdjacentHTML(
'beforeend',
`<a class='device' id='${d.id}'>${html}</a>`
);
} else {
elem.innerHTML = html;
}
};
module.exports.removeDeviceFromList = function removeDeviceFromList(device) {
const d = device;
document.getElementById(d.id).remove();
};
function switchDevice(id) {
if (activeDevice && activeDevice.pinIndex === false) {
document.getElementById(`device-${activeDevice.id}`).remove();
@@ -165,7 +160,9 @@ function switchDevice(id) {
cols--;
}
document.getElementById('all-devices').style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
document.getElementById(
'all-devices'
).style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
if (id === undefined) {
// document.getElementById('refresh-device-button').style.opacity = 0.2;
@@ -182,47 +179,59 @@ function switchDevice(id) {
if (!$deviceWrapper) {
const html = `<div class="col device-wrapper" id="device-${i}"><img id="device-${i}-pinned" class="device-pin" src="src/img/outline_push_pin_white_18dp.png"><iframe id="device-${i}-draw-area" class="draw-area"></iframe></div>`;
document.getElementById('all-devices').insertAdjacentHTML('afterbegin', html);
document
.getElementById('all-devices')
.insertAdjacentHTML('afterbegin', html);
$deviceWrapper = document.getElementById(`device-${i}`);
}
window.switchClass(document.getElementById(id), 'active-device');
drawDeviceFrame(id);
window.switchClass(document.getElementById(`device-${id}`), 'active-device-outline');
window.switchClass(
document.getElementById(`device-${id}`),
'active-device-outline'
);
document.getElementById('device-settings-table').style.display = 'block';
document.getElementById('device-settings-plugin-dropdown').value = activeDevice.type;
document.getElementById('device-settings-name').value = activeDevice.displayName || activeDevice.defaultName || '';
document.getElementById('device-settings-ip').value = activeDevice.addresses[0] || '';
document.getElementById('device-settings-port').value = activeDevice.port || '';
document.getElementById('device-settings-pin').checked = activeDevice.pinIndex;
document.getElementById('device-settings-plugin-dropdown').value =
activeDevice.type;
document.getElementById('device-settings-name').value =
activeDevice.displayName || activeDevice.defaultName || '';
document.getElementById('device-settings-ip').value =
activeDevice.addresses[0] || '';
document.getElementById('device-settings-port').value =
activeDevice.port || '';
document.getElementById('device-settings-pin').checked =
activeDevice.pinIndex;
if(activeDevice.plugin.config.mayChangePort){
if (activeDevice.plugin.config.mayChangePort) {
document.getElementById('device-settings-port').disabled = false;
}else{
} else {
document.getElementById('device-settings-port').disabled = true;
}
document.getElementById('device-settings-fields').innerHTML = "";
document.getElementById('device-settings-fields').innerHTML = '';
if(activeDevice.plugin.config.fields){
if (activeDevice.plugin.config.fields) {
let fields = activeDevice.plugin.config.fields;
fields.forEach(field => {
let $elem = document.createElement("input");
$elem.type = "text";
$elem.value = activeDevice.fields[field.key];// || field.value;
fields.forEach((field) => {
let $elem = document.createElement('input');
$elem.type = 'text';
$elem.value = activeDevice.fields[field.key]; // || field.value;
$elem.name = field.key;
$elem.onchange = function(e){
$elem.onchange = function (e) {
activeDevice.fields[field.key] = $elem.value;
field.action(activeDevice);
saveAll();
}
};
if(field.type=="textinput"){
let rowHTML =`<tr><th>${field.label}:</th><td colspan="3" id="${field.key}"></td></tr>`;
document.getElementById('device-settings-fields').insertAdjacentHTML("beforeend", rowHTML);
if (field.type == 'textinput') {
let rowHTML = `<tr><th>${field.label}:</th><td colspan="3" id="${field.key}"></td></tr>`;
document
.getElementById('device-settings-fields')
.insertAdjacentHTML('beforeend', rowHTML);
document.getElementById(field.key).appendChild($elem);
}
});
@@ -230,15 +239,13 @@ function switchDevice(id) {
ipcRenderer.send('enableDeviceDropdown', '');
ipcRenderer.send('setDevicePin', !DEVICE.all[id].pinIndex === false);
};
}
module.exports.switchDevice = switchDevice;
module.exports.getActiveDevice = function getActiveDevice() {
return activeDevice;
};
module.exports.pinActiveDevice = function pinActiveDevice() {
if (activeDevice === undefined) {
return;
@@ -249,7 +256,6 @@ module.exports.pinActiveDevice = function pinActiveDevice() {
DEVICE.changeActivePinIndex(true);
};
module.exports.unpinActiveDevice = function unpinActiveDevice() {
if (activeDevice === undefined) {
return;
@@ -258,19 +264,16 @@ module.exports.unpinActiveDevice = function unpinActiveDevice() {
DEVICE.changeActivePinIndex(false);
};
module.exports.pinDevice = function pinDevice(device) {
pinnedDevices.push(device);
DEVICE.changePinIndex(device, true);
};
module.exports.unpinDevice = function unpinDevice(device) {
pinnedDevices.push(device);
DEVICE.changePinIndex(device, false);
};
module.exports.resetPinned = function resetPinned() {
pinnedDevices.length = 0;
activeDevice = false;
@@ -285,12 +288,10 @@ module.exports.resetPinned = function resetPinned() {
document.getElementById('all-devices').innerHTML = '';
};
module.exports.getPinnedDevices = function getPinnedDevices() {
return pinnedDevices;
};
module.exports.toggleSlotButtons = function toggleSlotButtons(slotIndex) {
if (slotIndex === 1) {
document.getElementById('save-slot-1').classList.add('active');
@@ -307,7 +308,6 @@ module.exports.toggleSlotButtons = function toggleSlotButtons(slotIndex) {
}
};
module.exports.selectPreviousDevice = function selectPreviousDevice() {
if (activeDevice === undefined) {
return;
@@ -317,20 +317,22 @@ module.exports.selectPreviousDevice = function selectPreviousDevice() {
switchDevice(keys[prevIndex]);
};
module.exports.selectNextDevice = function selectNextDevice() {
if (activeDevice === undefined) {
return;
}
const keys = Object.keys(DEVICE.all);
const prevIndex = Math.min(keys.length - 1, keys.indexOf(activeDevice.id) + 1);
const prevIndex = Math.min(
keys.length - 1,
keys.indexOf(activeDevice.id) + 1
);
switchDevice(keys[prevIndex]);
};
function populatePluginLists() {
let typeSelect = '';
let addSelect = '<option value="" disabled selected hidden>&nbsp;+&nbsp;</option>';
let addSelect =
'<option value="" disabled selected hidden>&nbsp;+&nbsp;</option>';
Object.keys(PLUGINS.all).forEach((pluginType) => {
const plugin = PLUGINS.all[pluginType];
@@ -338,6 +340,7 @@ function populatePluginLists() {
typeSelect += `<option value='${pluginType}'>${plugin.config.defaultName}</option>`;
});
document.getElementById('device-settings-plugin-dropdown').innerHTML = typeSelect;
document.getElementById('device-settings-plugin-dropdown').innerHTML =
typeSelect;
document.getElementById('add-device-button').innerHTML = addSelect;
};
}