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=cue.nestedGroupModes.length; i>0; i--){ %>

    <% let test = "" %>

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

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

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

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

    <% }else{ %>
      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft"><%= test %></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[1] %> gBot gRight"><%= cue.listName %></td>

  <% }else{ %>
    <td colspan="<%= 11-cue.nestedGroupModes.length %>" class="cue-name gMode-<%= cue.nestedGroupModes[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 = "background: black; background: linear-gradient(90deg, "+fill+" "+percent+"%, transparent "+percent+"%);";

      if(cue.paused){
        bg+= "outline-color: "+border+";";
        bg+= "color: white;";
      }
      
      return "<div class='q-time-elapsed' style='"+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);

    }
  }
%>