Cue-View/plugins/qlab/cue.ejs

<% let playbackPosition = workspace.playbackPosition==cue.uniqueID ? "playback-position" : "" %>
<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %> <%= playbackPosition %>" id="<%= cue.uniqueID %>">

  <td></td> <!-- playhead/color indicator -->

  <td><center>
  <% if(cue.broken){ %>
    <img src="./plugins/qlab/img/status_broken.png" height="18px">

  <% }else if(cue.running){ %>
    <img src="./plugins/qlab/img/status_running.png" height="18px">

  <% }else if(cue.paused){ %>
    <img src="./plugins/qlab/img/status_paused.png" height="18px">

  <% }else if(cue.loaded){ %>
    <img src="./plugins/qlab/img/status_loaded.png" height="18px">

  <% }else if(cue.flagged){ %>
    <img src="./plugins/qlab/img/status_flagged.png" height="20px">

  <% }else{ %>
    
  <% } %>
  </center></td>


  <td><img src="./plugins/qlab/img/<%= cue.type.toLowerCase().replace(' ','-') %>.png" height="20px"></td>
  <td><center><%= cue.number || "&nbsp;" %></center></td>


  <% for(let i=0; i<cue.nestedGroupModes.length; i++){ %>

      <% if(cue.cues && cue.cues.length==0 && i==cue.nestedGroupModes.length-1){ %>
        <td class="gMode-<%= cue.nestedGroupModes[i] %> gLeft gBot gTop group-arrow"></td>
      
      <% }else if(cue.cues && i==cue.nestedGroupModes.length-1){ %>
        <td class="gMode-<%= cue.nestedGroupModes[i] %> gLeft gTop group-arrow"></td>

      <% }else if(cue.nestedGroupPosition[i]<=0){ %>
        <% if(i<cue.nestedGroupModes.length-1){ %>
          <td class="gMode-<%= cue.nestedGroupModes[i] %> gLeft gBot"></td>

        <% }else{ %>
          <td class="gMode-<%= cue.nestedGroupModes[i] %> gBot"></td>

        <% } %>

      <% }else if(i<cue.nestedGroupModes.length-1){ %>
        <td class="gMode-<%= cue.nestedGroupModes[i] %> gLeft"></td>

      <% }else{ %>
        <td class="gMode-<%= cue.nestedGroupModes[i] %>"></td>

      <% } %>
      

  <% } %>

  

  <!-- end spacer cells -->


	<% if(cue.type=="Group"){ %>
    <% if(cue.cues.length==0){ %>
      <td id="cue-name" colspan="<%= 11-cue.nestedGroupModes.length %>" class="gMode-<%= cue.groupMode %> gTop gBot gRight"><%= cue.listName %></td>

    <% }else{ %>
      <td id="cue-name" colspan="<%= 11-cue.nestedGroupModes.length %>" class="gMode-<%= cue.groupMode %> gTop gRight"><%= cue.listName %></td>

    <% } %>

  <% }else if(cue.nestedGroupPosition[1]==0){ %>
    <td colspan="<%= 11-cue.nestedGroupModes.length %>" class="cue-name gMode-<%= cue.nestedGroupModes[cue.nestedGroupModes.length-1] %> gBot gRight"><%= cue.listName %></td>

  <% }else{ %>
    <td colspan="<%= 11-cue.nestedGroupModes.length %>" class="cue-name gMode-<%= cue.nestedGroupModes[cue.nestedGroupModes.length-1] %> gRight"><%= cue.listName %></td>

  <% } %>


  <td class="q-time hide-medium"><%= cue.target %></td>




  <% if(cue.preWait){ %>
    <td class="q-time hide-medium"><%= elapsedTime(cue.preWait, cue.preWaitElapsed, "preWait", cue) %></td>

  <% }else{ %>
    <td class="q-time q-gray-text hide-small">00:00.00</td>

  <% } %>


  <% let cueTypesWithAction = ["Audio", "Mic", "Video", "Camera", "Text", "Light", "Fade", "Network", "MIDI File", "Timecode", "Wait"]; %>
  <% if((cue.type=="Group" && cue.groupMode==3) || cueTypesWithAction.indexOf(cue.type)>=0){ %>
    <td class="q-time hide-medium"><%= elapsedTime(cue.duration, cue.actionElapsed, "action", cue) %></td>

  <% }else{ %>
    <td class="hide-medium"></td>

  <% } %>



  <% if(cue.postWait){ %>
    <td class="q-time hide-medium"><%= elapsedTime(cue.postWait, cue.postWaitElapsed, "postWait", cue) %></td>

  <% }else{ %>
    <td class="q-time q-gray-text hide-medium">00:00.00</td>

  <% } %>



  <% if(cue.continueMode==2){ %>
    <td class="hide-small"><center><img src="plugins/qlab/img/auto_follow.png" height="20px"></center></td>

  <% }else if(cue.continueMode==1){ %>
    <td class="hide-small"><center><img src="plugins/qlab/img/auto_continue.png" height="20px"></center></td>

  <% }else{ %>
    <td class="hide-small"></td>

  <% } %>


</tr>

<% 
  function prettyFormatTime(seconds){
    if(!seconds){
      return "00:00.00";
    }
    var startIndex = 14;
    if(seconds>=3600){
      startIndex = 11;
    }
    var string = new Date(seconds * 1000).toISOString()
    return string.substring(startIndex, string.length-2)
  }

  function elapsedTime(def, value, type, cue){

    if(type=="action" && cue.paused){
      value-=cue.preWait;
    }

    let border, fill;
    if(cue.paused){
      border = "#f6e737";
      fill = "rgba(255, 240, 60, 0.7)";
    }else{
      border = "#48ba41";
      fill = "rgba(0, 200, 50, 0.5)";
    }


    if(value>0){
      let percent = value/def*100;
      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' ${bg}>${prettyFormatTime(Math.min(def, value))}</span>`;

    }else if(type=="postWait" || type=="action"){
      return `<span class='q-gray-text'>${prettyFormatTime(def)}</span>`;

    }else{
      return prettyFormatTime(def);

    }
  }
%>