Cue-View/plugins/atem/template.ejs

<header>
	<h1><%= listName  %></h1>
</header>

<% if (data.video.mixEffects) { %>
<% Object.entries(data.video.mixEffects).forEach(([meIndex, state])=>{ %>
    <div class="mixeffect_wrapper" id="me-<%= meIndex %>">
        <h1 class="atem-gray me-label">ME<%= Number(meIndex) + 1 %></h1>
        <div class="inputs-container show-small">
            <h3 class="atem-gray">Preview/Program</h3>
            <div class="source-wrapper">
                <% Object.values(data.inputs).sort((a,b)=>a.internalPortType<b.internalPortType).forEach((input)=>{ %>
                    <% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
                        <div id="me-<%= meIndex %>-input-<%= input.inputId %>" class="atem-input">
                            <div class="source-label"><%= input.shortName %></div>
                        </div>
                    <% } else {%>
                        <div id="me-<%= meIndex %>-input-<%= input.inputId %>" class="atem-input atem-disabled">
                            <div class="source-label"><%= input.shortName %></div>
                        </div>
                    <% }%>
                <% }) %>
            </div>
        </div>
        <div class="float-left" style="margin-right: 30px;">
            <div class="program-container hide-small">
                <h3 class="atem-gray">Program</h3>
                <div class="source-wrapper">
                    <% Object.values(data.inputs).sort((a,b)=>a.internalPortType<b.internalPortType).forEach((input)=>{ %>
                        <% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
                            <div id="me-<%= meIndex %>-program-input-<%= input.inputId %>" class="atem-input">
                                <div class="source-label"><%= input.shortName %></div>
                            </div>
                        <% } else {%>
                            <div id="me-<%= meIndex %>-program-input-<%= input.inputId %>" class="atem-input atem-disabled">
                                <div class="source-label"><%= input.shortName %></div>
                            </div>
                        <% }%>

                    <% }) %>
                </div>
            </div>
            <div class="preview hide-small">
                <h3 class="atem-gray">Preview</h3>
                <div class="source-wrapper">
                    <% Object.values(data.inputs).forEach((input)=>{ %>
                        <% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
                            <div id="me-<%= meIndex %>-preview-input-<%= input.inputId %>" class="atem-input">
                                <div class="source-label"><%= input.shortName %></div>
                            </div>
                        <% } else {%>
                            <div id="me-<%= meIndex %>-preview-input-<%= input.inputId %>" class="atem-input atem-disabled">
                                <div class="source-label"><%= input.shortName %></div>
                            </div>
                        <% }%>

                    <% }) %>
                </div>
            </div>
        </div>
        <div class="transition-container float-left">
            <div class="transition-settings">
                <div class="next-transition">
                    <h3>Next Transition</h3>
                    <div class="source-wrapper" style="width: 260px;">
                            <div class="atem-input clear"></div>
                            <div id="me-<%= meIndex %>-key-1-onair" class="atem-input">
                                <div class="source-label" style="flex-direction: column;">
                                    <div>ON</div> <div>AIR</div>
                                </div>
                            </div>
                            <div id="me-<%= meIndex %>-key-2-onair" class="atem-input <% if(data.video.downstreamKeyers.length<2){ %> atem-disabled <% } %>">
                                <div class="source-label" style="flex-direction: column;">
                                    <div>ON</div> <div>AIR</div>
                                </div>
                            </div>
                            <div id="me-<%= meIndex %>-key-3-onair" class="atem-input <% if(data.video.downstreamKeyers.length<3){ %> atem-disabled <% } %>">
                                <div class="source-label" style="flex-direction: column;">
                                    <div>ON</div> <div>AIR</div>
                                </div>
                            </div>
                            <div id="me-<%= meIndex %>-key-4-onair" class="atem-input <% if(data.video.downstreamKeyers.length<4){ %> atem-disabled <% } %>">
                                <div class="source-label" style="flex-direction: column;">
                                    <div>ON</div> <div>AIR</div>
                                </div>
                            </div>

                            <div id="me-<%= meIndex %>-transition-selection-1" class="atem-input">
                                <div class="source-label">BKGD</div>
                            </div>
                            <div id="me-<%= meIndex %>-transition-selection-2" class="atem-input">
                                <div class="source-label">KEY 1</div>
                            </div>
                            <div id="me-<%= meIndex %>-transition-selection-4" class="atem-input <% if(data.video.downstreamKeyers.length<2){ %> atem-disabled <% } %>">
                                <div class="source-label">KEY 2</div>
                            </div>
                            <div id="me-<%= meIndex %>-transition-selection-8" class="atem-input <% if(data.video.downstreamKeyers.length<3){ %> atem-disabled <% } %>">
                                <div class="source-label">KEY 3</div>
                            </div>
                            <div id="me-<%= meIndex %>-transition-selection-16" class="atem-input <% if(data.video.downstreamKeyers.length<4){ %> atem-disabled <% } %>">
                                <div class="source-label">KEY 4</div>
                            </div>
                    </div>
                </div>
            
                <div class="transition-style">
                    <h3>Transition Style</h3>
                    <div class="source-wrapper" style="width: 260px;">
                            <div id="me-<%= meIndex %>-transition-style-0" class="atem-input">
                                <div class="source-label">MIX</div>
                            </div>
                            <div id="me-<%= meIndex %>-transition-style-1" class="atem-input">
                                <div class="source-label">DIP</div>
                            </div>
                            <div id="me-<%= meIndex %>-transition-style-2" class="atem-input">
                                <div class="source-label">WIPE</div>
                            </div>
                            <div id="me-<%= meIndex %>-transition-style-4" class="atem-input">
                                <div class="source-label">STING</div>
                            </div>
                            <div id="me-<%= meIndex %>-transition-style-3" class="atem-input">
                                <div class="source-label">DVE</div>
                            </div>
                            <div id="me-<%= meIndex %>-transition-preview" class="atem-input">
                                <div class="source-label" style="flex-direction: column;">
                                    <div>PREV</div> <div>TRANS</div>
                                </div>
                            </div>
                            <div class="atem-input clear"></div>
                            <div id="me-<%= meIndex %>-cut" class="atem-input">
                                <div class="source-label">CUT</div>
                            </div>
                            <div id="me-<%= meIndex %>-auto" class="atem-input">
                                <div class="source-label">AUTO</div>
                            </div>
                            <div class="transition-rate atem-input clear">
                                <div class="atem-gray rate-heading">Rate</div>
                                <div id="me-<%= meIndex %>-transition-rate" class="transition-rate-label">&nbsp;&nbsp;</div>
                            </div>
                    </div>
                </div>
            </div>
            <div class="tbar-container">
                <div class="tbar-bg"></div>
                <div id="me-<%= meIndex %>-tbar-handle-div" class="tbar-handle"></div>
                <div id="me-<%= meIndex %>-tbar-div" class="tbar-div" ></div>
            </div>
            <div class="fade-to-black-container">
                <% if (data.video.downstreamKeyers) { %>
                    <% Object.entries(data.video.downstreamKeyers).forEach(([dskIndex, state])=>{ %>
                        <div class="dsk">
                            <h3 class="atem-gray">DSK<%= Number(dskIndex) + 1 %></h3>
                            <div class="source-wrapper">
                                <div id="dsk-<%= dskIndex %>-tie" class="atem-input">
                                    <div class="source-label">TIE</div>
                                </div>
                                <div class="dsk-rate atem-input clear">
                                    <div class="atem-gray rate-heading">Rate</div>
                                    <div id="dsk-<%= dskIndex %>-rate" class="dsk-rate-label">&nbsp;&nbsp;</div>
                                </div>
                                <div id="dsk-<%= dskIndex %>-onair" class="atem-input">
                                    <div class="source-label" style="flex-direction: column;">
                                        <div>ON</div> <div>AIR</div>
                                    </div>
                                </div>
                                <div id="dsk-<%= dskIndex %>-auto" class="atem-input">
                                    <div class="source-label">AUTO</div>
                                </div>
                            </div>
                        </div>
                    <% }) %>
                <% } %>
                <div class="fade-to-black">
                    <h3 class="atem-gray">Fade to Black</h3>
                    <div class="source-wrapper">
                        <div class="ftb-rate atem-input clear">
                            <div class="atem-gray rate-heading">Rate</div>
                            <div id="me-<%= meIndex %>-ftb-rate" class="ftb-rate-label">&nbsp;&nbsp;</div>
                        </div>
                        <div id="me-<%= meIndex %>-ftb" class="atem-input">
                            <div class="source-label">FTB</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<% }) %>
<% } %>