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<%= Number(meIndex) + 1 %></h1>
        <div class="program">
            <h3 class="atem-gray">Program</h3>
            <div class="source-wrapper">
                <% Object.entries(data.inputs).forEach(([inputId, state])=>{ %>
                    <div id="me-<%= meIndex %>-program-input-<%= inputId %>" class="atem-input">
                        <div class="source-label"><%= state.shortName %></div>
                    </div>
                <% }) %>
            </div>
        </div>

        <div class="preview">
            <h3 class="atem-gray">Preview</h3>
            <div class="source-wrapper">
                <% Object.entries(data.inputs).forEach(([inputId, state])=>{ %>
                    <div id="me-<%= meIndex %>-preview-input-<%= inputId %>" class="atem-input">
                        <div class="source-label"><%= state.shortName %></div>
                    </div>
                <% }) %>
            </div>
        </div>

        <!-- <div class="next-transition">
            <h3>Next Transition</h3>
            <div class="source-wrapper"></div>
        </div>
        
        <div class="transition-style">
            <h3>Transition Style</h3>
            <div class="source-wrapper"></div>
        </div> -->

        <div class="fade-to-black">
            <h3 class="atem-gray">Fade to Black</h3>
            <div class="source-wrapper">
                <div class="ftb-rate">
                    <div class="atem-gray" style="text-align: center">Rate</div>
                    <div id="me-<%= meIndex %>-ftb-rate" class="ftb-rate-label">1:00</div>
                </div>
                <div id="me-<%= meIndex %>-ftb" class="atem-input">
                    <div class="source-label">FTB</div>
                </div>
            </div>
        </div>
        
        <div class="source-wrapper">
            <progress id="me-<%= meIndex %>-tbar-pos" max="10000" value="0" class="tbar-progress"></progress>
        </div>
    </div>
<% }) %>
<% } %>


<% 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">
                    <div class="atem-gray" style="text-align: center">Rate</div>
                    <div id="dsk-<%= dskIndex %>-rate" class="dsk-rate-label">1:00</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>
    <% }) %>
<% } %>