stagehacks/Cue-View
1
0
Fork 0
mirror of https://github.com/stagehacks/Cue-View.git synced 2026-08-13 09:43:38 +00:00
Code Issues Packages Projects Releases 9 Wiki Activity

lint all the things

Browse Source
This commit is contained in:
sparks-alec
2022-02-14 03:25:37 -05:00
parent e5c8f242ab
commit 454b134745
30 changed files with 909 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/qlab/cart.ejs
+4 -6
View File
@@ -10,12 +10,10 @@
<% for(let r=0; r<cueList.cartRows; r++){ %>
<% for(let c=0; c<cueList.cartColumns; c++){ %>
<div class="cartCueWrapper" style="
left: <%= width*c %>%;
top: <%=height*r%>px;
width: <%=width%>%;
height: <%=height%>px;
"><div class="cartCue cartBlank"></div></div>
<% let style = `style="left:${width*c}%; top:${height*r}px; width:${width }%; height:${height}px;"`; %>
<div class="cartCueWrapper" <%= style %>><div class="cartCue cartBlank"></div></div>
<% } %>
<% } %>
plugins/qlab/cue.ejs
+4 -3
View File
@@ -157,17 +157,18 @@
if(value>0){
let percent = value/def*100;
let bg = "background: black; background: linear-gradient(90deg, "+fill+" "+percent+"%, transparent "+percent+"%);";
let bg = `style='background: black; background: linear-gradient(90deg, ${fill} ${percent}%, transparent ${percent}%);`;
if(cue.paused){
bg+= "outline-color: "+border+";";
bg+= "color: white;";
}
bg+="'";
return "<div class='q-time-elapsed' style='"+bg+"'>"+prettyFormatTime(Math.min(def, value))+"</span>";
return `<div class='q-time-elapsed' ${bg}>"+prettyFormatTime(Math.min(def, value))+"</span>`;
}else if(type=="postWait" || type=="action"){
return "<span class='q-gray-text'>"+prettyFormatTime(def)+"</span>";
return `<span class='q-gray-text'>${prettyFormatTime(def)}</span>`;
}else{
return prettyFormatTime(def);
plugins/qlab/info.html
+4
View File
@@ -0,0 +1,4 @@
<h3>Connection Requirements</h3>
<ul>
<li>No Passcode</li>
</ul>
plugins/qlab/main.js
+104 -107
View File
@@ -1,4 +1,4 @@
let _ = require('lodash');
const _ = require('lodash');
const fs = require('fs');
let lastElapsedUpdate = Date.now();
@@ -12,66 +12,62 @@ exports.searchOptions = {
bonjourName: 'qlab',
};
exports.ready = function (device) {
exports.ready = function ready(device) {
device.send(`/version`);
device.send('/workspaces');
};
exports.data = function (device, oscData) {
const address = oscData.address;
let osc = oscData.address.split('/');
exports.data = function data(device, oscData) {
const osc = oscData.address.split('/');
osc.shift();
let data;
const d = device;
//console.log(address)
// console.log(oscData.address)
if(match(osc, ["reply", "version"])){
let json = JSON.parse(oscData.args[0]);
device.data.version = json.data;
const json = JSON.parse(oscData.args[0]);
d.data.version = json.data;
this.deviceInfoUpdate(device, 'status', 'ok');
this.deviceInfoUpdate(d, 'status', 'ok');
}else if(match(osc, ["reply", "workspaces"])){
let json = JSON.parse(oscData.args[0]);
device.data.workspaces = {};
const json = JSON.parse(oscData.args[0]);
d.data.workspaces = {};
json.data.forEach(wksp => {
device.data.workspaces[wksp.uniqueID] = {
d.data.workspaces[wksp.uniqueID] = {
uniqueID: wksp.uniqueID,
displayName: wksp.displayName,
cueLists: {},
cues: {}
}
device.send(`/workspace/${wksp.uniqueID}/connect`);
d.send(`/workspace/${wksp.uniqueID}/connect`);
});
console.log(device.data.workspaces);
}else if(match(osc, ["reply", "workspace", "*", "connect"])){
device.send(`/workspace/${osc[2]}/updates`, [
d.send(`/workspace/${osc[2]}/updates`, [
{ type: 'i', value: 1 },
]);
device.send(`/workspace/${osc[2]}/cueLists`);
d.send(`/workspace/${osc[2]}/cueLists`);
}else if(match(osc, ["reply", "workspace", "*", "cueLists"])){
this.deviceInfoUpdate(device, 'status', 'ok');
this.deviceInfoUpdate(d, 'status', 'ok');
let workspace = device.data.workspaces[osc[2]];
let json = JSON.parse(oscData.args[0]);
const workspace = d.data.workspaces[osc[2]];
const json = JSON.parse(oscData.args[0]);
workspace.cueLists = {};
workspace.cues = {};
@@ -82,13 +78,13 @@ exports.data = function (device, oscData) {
addChildrenToWorkspace(workspace, ql);
});
device.draw();
d.draw();
setTimeout(function(){
setTimeout(() => {
json.data.forEach(ql => {
workspace.cueLists[ql.uniqueID] = ql;
getValuesForKeys(device, json.workspace_id, ql);
getValuesForKeys(d, json.workspace_id, ql);
});
}, 0);
@@ -96,31 +92,32 @@ exports.data = function (device, oscData) {
}else if(match(osc, ["reply", "cue_id", "*", "children"])){
let json = JSON.parse(oscData.args[0]);
let workspace = device.data.workspaces[json.workspace_id];
let cue_id = osc[2];
let cue = workspace.cues[cue_id];
const json = JSON.parse(oscData.args[0]);
const workspace = d.data.workspaces[json.workspace_id];
const cueID = osc[2];
const cue = workspace.cues[cueID];
if(!_.isEqual(cue.cues, json.data)){
workspace.cueLists[cue_id].cues = json.data;
addChildrenToWorkspace(workspace, workspace.cueLists[cue_id]);
workspace.cueLists[cueID].cues = json.data;
addChildrenToWorkspace(workspace, workspace.cueLists[cueID]);
device.draw();
d.draw();
getValuesForKeys(device, json.workspace_id, cue);
getValuesForKeys(d, json.workspace_id, cue);
}
}else if(match(osc, ["reply", "cue_id", "*", "valuesForKeys"])){
let json = JSON.parse(oscData.args[0]);
let cueValues = json.data;
const json = JSON.parse(oscData.args[0]);
const cueValues = json.data;
let workspace = device.data.workspaces[json.workspace_id];
const workspace = d.data.workspaces[json.workspace_id];
let cue = workspace.cues[cueValues.uniqueID];
if(!cue){
cue = workspace.cues[cueValues.uniqueID] = {};
workspace.cues[cueValues.uniqueID] = {};
cue = workspace.cues[cueValues.uniqueID];
}
cue.uniqueID = cueValues.uniqueID;
@@ -149,15 +146,15 @@ exports.data = function (device, oscData) {
cue.actionElapsed = cueValues.actionElapsed;
cue.postWaitElapsed = cueValues.postWaitElapsed;
let nestedGroupModes = [];
let nestedGroupPosition = [0];
var obj = cue;
const nestedGroupModes = [];
const nestedGroupPosition = [0];
let obj = cue;
while(obj.parent!="[root group of cue lists]"){
while(obj.parent !== "[root group of cue lists]"){
nestedGroupModes.push(obj.groupMode);
let pos = _.findIndex(workspace.cues[obj.parent].cues, {uniqueID: obj.uniqueID});
pos= Math.abs(pos-workspace.cues[obj.parent].cues.length)-1;
pos = Math.abs(pos - workspace.cues[obj.parent].cues.length) - 1;
nestedGroupPosition.push(pos)
obj = workspace.cues[obj.parent];
@@ -165,61 +162,61 @@ exports.data = function (device, oscData) {
cue.nestedGroupModes = nestedGroupModes;
cue.nestedGroupPosition = nestedGroupPosition;
//console.log("draw "+cue.number)
// console.log("draw "+cue.number)
device.update("updateCueData", {cue: cue, allCues: workspace.cues, workspace: workspace});
d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
}else if(match(osc, ["reply", "cue_id", "*", "preWaitElapsed"])){
let json = JSON.parse(oscData.args[0]);
let workspace = device.data.workspaces[json.workspace_id];
let cue = workspace.cues[osc[2]];
const json = JSON.parse(oscData.args[0]);
const workspace = d.data.workspaces[json.workspace_id];
const cue = workspace.cues[osc[2]];
cue.preWaitElapsed = json.data;
lastElapsedUpdate = Date.now();
device.update("updateCueData", {cue: cue, allCues: workspace.cues, workspace: workspace});
d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
}else if(match(osc, ["reply", "cue_id", "*", "actionElapsed"])){
let json = JSON.parse(oscData.args[0]);
let workspace = device.data.workspaces[json.workspace_id];
let cue = workspace.cues[osc[2]];
const json = JSON.parse(oscData.args[0]);
const workspace = d.data.workspaces[json.workspace_id];
const cue = workspace.cues[osc[2]];
cue.actionElapsed = json.data;
lastElapsedUpdate = Date.now();
device.update("updateCueData", {cue: cue, allCues: workspace.cues, workspace: workspace});
d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
}else if(match(osc, ["reply", "cue_id", "*", "postWaitElapsed"])){
let json = JSON.parse(oscData.args[0]);
let workspace = device.data.workspaces[json.workspace_id];
let cue = workspace.cues[osc[2]];
const json = JSON.parse(oscData.args[0]);
const workspace = device.data.workspaces[json.workspace_id];
const cue = workspace.cues[osc[2]];
cue.postWaitElapsed = json.data;
lastElapsedUpdate = Date.now();
device.update("updateCueData", {cue: cue, allCues: workspace.cues, workspace: workspace});
d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
}else if(match(osc, ["update", "workspace", "*", "cue_id", "*"])){
let workspace = device.data.workspaces[osc[2]];
const workspace = d.data.workspaces[osc[2]];
if(workspace){
let cueLists = Object.keys(workspace.cueLists);
let cue_id = osc[4];
const cueLists = Object.keys(workspace.cueLists);
const cueID = osc[4];
if(cue_id!="[root group of cue lists"){
if(cueLists.includes(cue_id)){
device.send(`/workspace/${workspace.uniqueID}/cue_id/${cue_id}/children`);
if(cueID !== "[root group of cue lists"){
if(cueLists.includes(cueID)){
d.send(`/workspace/${workspace.uniqueID}/cue_id/${cueID}/children`);
}
device.send(`/workspace/${osc[2]}/cue_id/${cue_id}/valuesForKeys`, [
d.send(`/workspace/${osc[2]}/cue_id/${cueID}/valuesForKeys`, [
{type: 's', value: valuesForKeysString}
]);
@@ -229,40 +226,40 @@ exports.data = function (device, oscData) {
}else if(match(osc, ["update", "workspace", "*"])){
// occurs when cue lists are reordered or a list is deleted
device.send(`/workspace/${osc[2]}/cueLists`);
d.send(`/workspace/${osc[2]}/cueLists`);
}else if(match(osc, ["update", "workspace", "*", "dashboard"])){
//this workspace might be new, let's check
if(device.data.workspaces[osc[2]]){
// this workspace might be new, let's check
if(d.data.workspaces[osc[2]]){
//
}else{
console.log("new workspace!");
device.send('/workspaces');
d.send('/workspaces');
}
}else if(match(osc, ["update", "workspace", "*", "cueList", "*", "playbackPosition"])){
let workspace = device.data.workspaces[osc[2]];
const workspace = d.data.workspaces[osc[2]];
if(workspace){
let cue = workspace.cues[oscData.args[0]];
const cue = workspace.cues[oscData.args[0]];
if(cue){
workspace.playbackPosition = oscData.args[0] ? cue.uniqueID : "";
device.update("updatePlaybackPosition", {cue: cue});
d.update("updatePlaybackPosition", {'cue': cue});
}
}
}else if(match(osc, ["update", "workspace", "*", "disconnect"])){
delete device.data.workspaces[osc[2]];
device.draw();
delete d.data.workspaces[osc[2]];
d.draw();
}else{
//console.log(address)
// console.log(address)
}
@@ -270,25 +267,24 @@ exports.data = function (device, oscData) {
};
let cueTemplate = _.template(fs.readFileSync(`./plugins/qlab/cue.ejs`));
let tileTemplate = _.template(fs.readFileSync(`./plugins/qlab/tile.ejs`));
let cartTemplate = _.template(fs.readFileSync(`./plugins/qlab/cart.ejs`));
let listTemplate = _.template(fs.readFileSync(`./plugins/qlab/cuelist.ejs`));
const cueTemplate = _.template(fs.readFileSync(`./plugins/qlab/cue.ejs`));
const tileTemplate = _.template(fs.readFileSync(`./plugins/qlab/tile.ejs`));
const cartTemplate = _.template(fs.readFileSync(`./plugins/qlab/cart.ejs`));
exports.update = function(device, doc, updateType, data){
exports.update = function update(device, doc, updateType, data){
if(updateType=="updateCueData"){
$elem = doc.getElementById(data.cue.uniqueID);
if(updateType === "updateCueData"){
const $elem = doc.getElementById(data.cue.uniqueID);
if($elem){
if(data.cue.type=="Cue List"){
$elem.outerHTML = '<h3>'+data.workspace.displayName+' &mdash; '+data.cue.name+'</h3>';
if(data.cue.type === "Cue List"){
$elem.outerHTML = `<h3>${data.workspace.displayName} &mdash; ${data.cue.name}</h3>`;
}else if(data.cue.type=="Cart"){
$elem.outerHTML = cartTemplate({tileTemplate: tileTemplate, cueList: data.cue, allCues: data.workspace.cues});
}else if(data.cue.type === "Cart"){
$elem.outerHTML = cartTemplate({'tileTemplate': tileTemplate, 'cueList': data.cue, 'allCues': data.workspace.cues});
}else if(data.cue.cartPosition && data.cue.cartPosition[0]!=0){
}else if(data.cue.cartPosition && data.cue.cartPosition[0] !== 0){
$elem.outerHTML = tileTemplate(data);
}else{
@@ -296,13 +292,13 @@ exports.update = function(device, doc, updateType, data){
}
}
}else if(updateType=="updatePlaybackPosition"){
}else if(updateType === "updatePlaybackPosition"){
Array.from(doc.getElementsByClassName("playback-position")).forEach(
function($elem, index, array) {
($elem, index, array) => {
$elem.classList.remove("playback-position");
});
$elem = doc.getElementById(data.cue.uniqueID);
const $elem = doc.getElementById(data.cue.uniqueID);
$elem.classList.add("playback-position");
$elem.scrollIntoView({behavior: "smooth", block: "center"});
@@ -319,30 +315,31 @@ exports.update = function(device, doc, updateType, data){
const valuesForKeysString =
'["uniqueID","number","name","listName","isBroken","isRunning","isLoaded","isFlagged",'
+'"type","children","preWait","postWait","currentDuration","colorName","continueMode",'
+'"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",'
+'"actionElapsed","postWaitElapsed","isPaused"]';
+ '"type","children","preWait","postWait","currentDuration","colorName","continueMode",'
+ '"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",'
+ '"actionElapsed","postWaitElapsed","isPaused"]';
function addChildrenToWorkspace(workspace, q){
workspace.cues[q.uniqueID] = q;
workspace.cues[q.uniqueID].nestedGroupModes = [];
workspace.cues[q.uniqueID].nestedGroupPosition = [];
const w = workspace;
w.cues[q.uniqueID] = q;
w.cues[q.uniqueID].nestedGroupModes = [];
w.cues[q.uniqueID].nestedGroupPosition = [];
if(q.cues){
q.cues.forEach(q => {
addChildrenToWorkspace(workspace, q);
q.cues.forEach(cue => {
addChildrenToWorkspace(w, cue);
});
}
}
function getValuesForKeys(device, workspace_id, q){
device.send(`/workspace/${workspace_id}/cue_id/${q.uniqueID}/valuesForKeys`, [
function getValuesForKeys(device, workspaceID, q){
device.send(`/workspace/${workspaceID}/cue_id/${q.uniqueID}/valuesForKeys`, [
{type: 's', value: valuesForKeysString}
]);
if(q.cues){
q.cues.forEach(q => {
getValuesForKeys(device, workspace_id, q);
q.cues.forEach(cue => {
getValuesForKeys(device, workspaceID, cue);
});
}
}
@@ -350,11 +347,11 @@ function getValuesForKeys(device, workspace_id, q){
function match(osc, array){
let out = true;
if(osc.length!=array.length){
if(osc.length !== array.length){
return false;
}
array.forEach((match, i)=> {
if(osc[i]!=match && match!="*"){
array.forEach((m, i)=> {
if(osc[i] !== m && m !== "*"){
out = false;
}
});
@@ -363,16 +360,16 @@ function match(osc, array){
let interval = 5;
let heartbeatCount = 0;
exports.heartbeat = function (device) {
exports.heartbeat = function heartbeat(device) {
heartbeatCount++;
if(Date.now()-lastElapsedUpdate>300){
if(Date.now() - lastElapsedUpdate > 300){
interval = 5;
}else{
interval = 1;
}
if(heartbeatCount%interval==0){
if(heartbeatCount % interval === 0){
device.send(`/cue/active/preWaitElapsed`);
device.send(`/cue/active/actionElapsed`);
device.send(`/cue/active/postWaitElapsed`);
plugins/qlab/styles.css
+37 -41
View File
@@ -170,77 +170,73 @@ tr.playback-position .q-gray-text {
color: #424242;
}
.q-time-elapsed {
margin: 0px 2px;
outline: #49c042 1px solid;
margin: 0px 2px;
outline: #49c042 1px solid;
line-height: 18px;
}
.cart{
.cart {
position: relative;
height: 600px;
width: 100%;
height: 600px;
width: 100%;
background-color: #2c2b2a;
}
.cartCueWrapper{
display: block;
.cartCueWrapper {
display: block;
position: absolute;
box-sizing: border-box;
padding: 3px;
padding: 3px;
}
.cartCue{
height: 100%;
.cartCue {
height: 100%;
box-sizing: border-box;
border: 3px solid;
border-radius: 6px;
color: white;
border: 3px solid;
border-radius: 6px;
color: white;
}
.cartCue p{
margin: 10px;
.cartCue p {
margin: 10px;
}
.cartCueIcon{
.cartCueIcon {
position: absolute;
right: 13px;
top: 13px;
right: 13px;
top: 13px;
}
.cartColor-red{
border-color: #ff4242;
background-color: #9b3726;
.cartColor-red {
border-color: #ff4242;
background-color: #9b3726;
}
.cartColor-orange{
border-color: #ffa500;
.cartColor-orange {
border-color: #ffa500;
background-color: #ad6026;
}
.cartColor-green{
border-color: #01d52f;
.cartColor-green {
border-color: #01d52f;
background-color: #397f27;
}
.cartColor-blue{
border-color: #536de0;
.cartColor-blue {
border-color: #536de0;
background-color: #304893;
}
.cartColor-purple{
border-color: #a601c0;
.cartColor-purple {
border-color: #a601c0;
background-color: #592d74;
}
.cartColor-none{
border-color: #95929f;
background-color: #3b3b3b
.cartColor-none {
border-color: #95929f;
background-color: #3b3b3b;
}
.cartBlank{
border-color: #1f1f1f;
.cartBlank {
border-color: #1f1f1f;
background-color: #1f1f1f;
}
.cartCueWrapper.playback-position .cartCue{
border-color: #88b3db;
outline: #88b3db 1px solid;
.cartCueWrapper.playback-position .cartCue {
border-color: #88b3db;
outline: #88b3db 1px solid;
box-shadow: 0px 0px 3px 3px #88b3db, inset 0px 0px 5px #88b3db;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.hide-medium {
display: none;
plugins/qlab/tile.ejs
+17 -19
View File
@@ -14,26 +14,24 @@
left = (cue.cartPosition[1]-1)*width;
}
let style = `style="left:${left}%; top:${top}px; width:${width }%; height:${height}px;"`;
%>
<div id="<%= cue.uniqueID %>" class="cartCueWrapper " style="
left: <%= left %>%;
top: <%= top %>px;
width: <%= width %>%;
height: <%= height %>px;
">
<div id="<%= cue.uniqueID %>" class="cartCueWrapper" <%= style %> >
<div class="cartCueIcon">
<% if(cue.broken){ %>
<img src="plugins/qlab/img/status_broken_white.png" height="18px">
<% }else if(cue.running){ %>
<img src="plugins/qlab/img/pause_circled.png" height="24px">
<% }else{ %>
<img src="plugins/qlab/img/play_circled.png" height="24px">
<% } %>
</div>
<div class="cartCue cartColor-<%= cue.colorName %>">
<p><%= cue.number %> &bull; <%= cue.displayName %></p>
</div>
<div class="cartCueIcon">
<% if(cue.broken){ %>
<img src="plugins/qlab/img/status_broken_white.png" height="18px">
<% }else if(cue.running){ %>
<img src="plugins/qlab/img/pause_circled.png" height="24px">
<% }else{ %>
<img src="plugins/qlab/img/play_circled.png" height="24px">
<% } %>
</div>
</div>
<div class="cartCue cartColor-<%= cue.colorName %>">
<p><%= cue.number %> &bull; <%= cue.displayName %></p>
</div>
</div>