add playhead information overlay

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} &bull; ${cue.displayName}`;
+        } else {
+          $playheadName.innerHTML = cue.displayName;
+        }
+        if (cue.notes) {
+          $playheadNotes.innerHTML = cue.notes;
+        } else {
+          $playheadNotes.innerHTML = '<span style="color:#5C5C5C">Notes</span>';
+        }
+        if (!cue.armed) {
+          $playheadName.classList.add('playhead-disarmed');
+        } else {
+          $playheadName.classList.remove('playhead-disarmed');
+        }
+      }
+    } else {
+      $playheadName.setAttribute('class', `playhead-name`);
+      $playheadName.innerHTML = '<span style="color:#747574">[no cue on standby]</span>';
+      $playheadNotes.innerHTML = '';
+      $playheadInfo.classList.remove('playhead-active');
     }
   }
 };

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;

plugins/qlab/template.ejs

@@ -32,3 +32,8 @@
 
 <% } %>
 
+<div id="playhead-information">
+  <div id="playhead-name" class="playhead-name"><span style="color:#747574">[no cue on standby]</span></div>
+  <div id="playhead-notes"></div>
+</div>
+