Cue-View/plugins/qlab/cue.ejs

<% let cueKeys = allCues[cue.uniqueID]; %>
<% let playbackPosition = workspace.playbackPosition==cue.uniqueID ? "playback-position" : "" %>
<% let selected = workspace.selected.includes(cue.uniqueID) ? "selected": "" %>

<% if(cueKeys && cueKeys.parent){ %>

<tr class="q-<%= cueKeys.colorName %> q-armed-<%= cueKeys.armed %> <%= playbackPosition %> <%= selected %>" id="<%= cueKeys.uniqueID %>">

    <!-- playhead/color indicator -->
    <td class="playhead"></td> 
    

    <!-- status indicator -->
    <td><center> 
    <% if(cueKeys.isBroken){ %>
        <img src="./plugins/qlab/img/status_broken.png" height="18px">
    
    <% }else if(cueKeys.isRunning){ %>
        <img src="./plugins/qlab/img/status_running.png" height="18px">
    
    <% }else if(cueKeys.isPaused){ %>
        <img src="./plugins/qlab/img/status_paused.png" height="18px">
    
    <% }else if(cueKeys.isLoaded){ %>
        <img src="./plugins/qlab/img/status_loaded.png" height="18px">
    
    <% }else if(cueKeys.isFlagged){ %>
        <img src="./plugins/qlab/img/status_flagged.png" height="20px">
    
    <% }else{ %>
        
    <% } %>
    </center></td>


    <!-- cue type icon -->
    <% if(cueKeys.type == "Group" && cueKeys.mode){ %> 
        <td><img src="./plugins/qlab/img/v5/group-<%= cueKeys.mode %>.png" height="20px"></td>

    <% }else{ %>
        <td><img src="./plugins/qlab/img/<%= cueKeys.type.toLowerCase().replace(' ','-') %>.png" height="20px"></td>

    <% } %>



    <!-- cue number -->
    <td><center><%= cueKeys.number || "&nbsp;" %></center></td>


    <% let nextCue = cueKeys.cueInWorkspace.parent.cues[cueKeys.cueInWorkspace.sortIndex+1]; %>

    <!-- spaces before name -->
    <% for(let i=0; i<cueKeys.parentKeys.length; i++){ %>
        <% let parent = cueKeys.parentKeys[i+1]; %>
        <%  %>

        <% if(cueKeys.type=="Group" && cueKeys.cues.length==0 && i==cueKeys.parentKeys.length-1){ %>
            <td class="gMode-<%= cueKeys.mode %> gLeft gTop gBot group-arrow"></td>

        <% }else if(cueKeys.type=="Group" && i==cueKeys.parentKeys.length-1){ %>
            <td class="gMode-<%= cueKeys.mode %> gLeft gTop group-arrow"></td>

        <%}else if(parent){%>

            <% let parentCues = parent.cueInWorkspace.cues %>
            <% let lastCueInMe = parentCues[parentCues.length-1]%>

            <% while(lastCueInMe.type=="Group" && lastCueInMe.cues.length){
                parentCues = lastCueInMe.cues;
                lastCueInMe = parentCues[parentCues.length-1];
            } %>
                    
            <% if(lastCueInMe.uniqueID == cueKeys.uniqueID){ %>
                <td class="gMode-<%= parent.mode %> gLeft gBot"></td>

            <% }else{ %>
                <td class="gMode-<%= parent.mode %> gLeft"></td>
                

            <% } %>


        <% }else if(cueKeys.parentKeys[i]){ %>
            <% let nextCue2 = cueKeys.parentKeys[i].cues[cueKeys.cueInWorkspace.sortIndex+1]; %>

            <% if(!nextCue2){ %>
                <td class="gMode-<%= cueKeys.parentKeys[i].mode %> gBot"></td>

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

            <% } %>


        <% } %>
        
    <% } %>    

            

    <!-- cue name -->
  
    <% if(cue.type=="Group"){ %>
        
        <% if(cue.cues && cue.cues.length==0){ %>
          <td id="cue-name" colspan="<%= 11-cueKeys.parentKeys.length %>" class="gMode-<%= cueKeys.mode %> gTop gBot gRight"><%= cueKeys.listName %></td>
    
        <% }else{ %>
          <td id="cue-name" colspan="<%= 11-cueKeys.parentKeys.length %>" class="gMode-<%= cueKeys.mode %> gTop gRight"><%= cueKeys.listName %></td>
    
        <% } %>
    
    <% }else if(!nextCue){ %>
        <td colspan="<%= 11-cueKeys.parentKeys.length %>" class="cue-name gMode-<%= cueKeys.parent.mode %> gBot gRight"><%= cueKeys.listName %></td>
    
    <% }else{ %>
        <td colspan="<%= 11-cueKeys.parentKeys.length %>" class="cue-name gMode-<%= cueKeys.parent.mode %> gRight"><%= cueKeys.listName %></td>
    
    <% } %>
    



    <!-- cue target -->
    <% if(cueKeys.currentCueTarget){ %>
        <td class="q-target hide-medium"><%= allCues[cueKeys.currentCueTarget].number ||  allCues[cueKeys.currentCueTarget].listName %></td>

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

    <% } %>
    


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

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

    <% } %>



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

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

    <% } %>


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

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

    <% } %>



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

    <% }else if(cueKeys.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>


    <% }else{ %>

<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %> " id="<%= cue.uniqueID %>">
    <td></td>
    <td></td>
    <td></td>
    <td><center><%= cue.number || "&nbsp;" %></center></td>
    <td colspan="11" id="cue-name"><%= cue.listName %></td>
    <td class="q-time hide-medium"></td>
    <td class="q-time q-gray-text hide-small">00:00.00</td>
    <td class="hide-medium"></td>
    <td class="q-time q-gray-text hide-medium">00:00.00</td>
    <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.isPaused){
      value-=cue.preWait;
    }

    let border, fill;
    if(cue.isPaused){
      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.isPaused){
        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" && cue.continueMode==0){
      return `<span class='q-gray-text'>${prettyFormatTime(def)}</span>`;

    }else{
      return prettyFormatTime(def);

    }
  }
%>