diff --git a/plugins/qlab/main.js b/plugins/qlab/main.js index 8c97634..c34df6f 100644 --- a/plugins/qlab/main.js +++ b/plugins/qlab/main.js @@ -30,7 +30,7 @@ const valuesForKeysString = '["uniqueID","number","name","listName","isBroken","isRunning","isLoaded","isFlagged",' + '"type","children","preWait","postWait","duration","colorName","continueMode",' + '"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",' + - '"actionElapsed","postWaitElapsed","isPaused","currentCueTarget","isRunning","armed"]'; + '"actionElapsed","postWaitElapsed","isPaused","currentCueTarget","isRunning","armed","notes"]'; exports.ready = function ready(_device) { const device = _device; @@ -135,6 +135,7 @@ exports.data = function data(_device, oscData) { cue.isPaused = keyValues.isPaused; cue.currentCueTarget = keyValues.currentCueTarget; cue.armed = keyValues.armed; + cue.notes = keyValues.notes; if (keyValues.isRunning) { device.data.somethingPlaying = true; @@ -241,7 +242,8 @@ function processCueList(list, knownCueIDs, _device, _nestedIndex) { } } -exports.update = function update(device, doc, updateType, data) { +exports.update = function update(device, _doc, updateType, data) { + const doc = _doc; if (updateType === 'updateCueRow') { const $elem = doc.getElementById(data.cue.uniqueID); if ($elem) { @@ -266,18 +268,50 @@ exports.update = function update(device, doc, updateType, data) { Array.from(doc.querySelectorAll('.playback-position')).forEach(($el) => { $el.classList.remove('playback-position'); }); + for (let i = 0; i < data.workspace.selected.length; i++) { const $elem = doc.getElementById(data.workspace.selected[i]); if ($elem) { $elem.classList.add('selected'); } } + + const $playheadInfo = doc.getElementById('playhead-information'); + const $playheadName = doc.getElementById('playhead-name'); + const $playheadNotes = doc.getElementById('playhead-notes'); + if (data.workspace.playbackPosition) { - const $elem = doc.getElementById(data.workspace.playbackPosition); - if ($elem) { - $elem.classList.add('playback-position'); - $elem.scrollIntoView({ behavior: 'smooth', block: 'center' }); + const $cueRow = doc.getElementById(data.workspace.playbackPosition); + if ($cueRow) { + $cueRow.classList.add('playback-position'); + $cueRow.scrollIntoView({ behavior: 'smooth', block: 'center' }); } + + const cue = device.data.cueKeys[data.workspace.playbackPosition]; + if (cue) { + $playheadName.setAttribute('class', `playhead-name cartColor-${cue.colorName} playhead-disarmed`); + $playheadInfo.classList.add('playhead-active'); + if (cue.number) { + $playheadName.innerHTML = `${cue.number} • ${cue.displayName}`; + } else { + $playheadName.innerHTML = cue.displayName; + } + if (cue.notes) { + $playheadNotes.innerHTML = cue.notes; + } else { + $playheadNotes.innerHTML = 'Notes'; + } + if (!cue.armed) { + $playheadName.classList.add('playhead-disarmed'); + } else { + $playheadName.classList.remove('playhead-disarmed'); + } + } + } else { + $playheadName.setAttribute('class', `playhead-name`); + $playheadName.innerHTML = '[no cue on standby]'; + $playheadNotes.innerHTML = ''; + $playheadInfo.classList.remove('playhead-active'); } } }; diff --git a/plugins/qlab/styles.css b/plugins/qlab/styles.css index e4f1da3..fca0407 100644 --- a/plugins/qlab/styles.css +++ b/plugins/qlab/styles.css @@ -224,27 +224,27 @@ tr.selected { right: 13px; top: 13px; } -.cartColor-red { +div.cartColor-red { border-color: #e7443a; background-color: #942f27; } -.cartColor-orange { +div.cartColor-orange { border-color: #f18f28; background-color: #a95023; } -.cartColor-green { +div.cartColor-green { border-color: #4ebf32; background-color: #397824; } -.cartColor-blue { +div.cartColor-blue { border-color: #3a54cf; background-color: #25378a; } -.cartColor-purple { +div.cartColor-purple { border-color: #7e25a5; background-color: #4c2269; } -.cartColor-none { +div.cartColor-none { border-color: #95929f; background-color: #3b3b3b; } @@ -258,6 +258,53 @@ tr.selected { box-shadow: 0px 0px 3px 3px #88b3db, inset 0px 0px 5px #88b3db; } +#playhead-information { + width: 80%; + height: 140px; + position: fixed; + bottom: 30px; + left: 10%; + padding: 16px; + box-sizing: border-box; + + background-color: #2e2d2d; + border: #424242 3px solid; + border-radius: 4px; + box-shadow: black 0px 0px 20px 5px; +} +#playhead-information.playhead-active { + border-color: #4cbe34; +} +.playhead-name { + width: 100%; + padding: 6px 12px; + box-sizing: border-box; + margin-bottom: 12px; + + background-color: #434343; + border: #434343 1px solid; + font-size: 18px; + color: white; + border-radius: 3px; +} +.playhead-disarmed { + background: url('img/disarmed-pattern-light.png'); + background-attachment: fixed; +} +#playhead-notes { + width: 100%; + padding: 6px 12px; + box-sizing: border-box; + height: 50px; + + border: #5c5b5b 1px solid; + font-size: 18px; + color: #9a9a99; + border-radius: 3px; + overflow: hidden; + text-overflow: ellipsis; +} + @media screen and (min-width: 0px) and (max-width: 750px) { .hide-medium { display: none; diff --git a/plugins/qlab/template.ejs b/plugins/qlab/template.ejs index 47ba696..65d9437 100644 --- a/plugins/qlab/template.ejs +++ b/plugins/qlab/template.ejs @@ -32,3 +32,8 @@ <% } %> +
+
[no cue on standby]
+
+
+