From f605125f74f361066bfccf444412b10d0bf84820 Mon Sep 17 00:00:00 2001
From: Joel Wetzell <jwetzell@cait.org>
Date: Wed, 8 Feb 2023 12:27:38 -0600
Subject: [PATCH] populate next transition and transition style

---
 plugins/atem/styles.css   |  15 ++++--
 plugins/atem/template.ejs | 107 +++++++++++++++++++++++++++++++++-----
 2 files changed, 107 insertions(+), 15 deletions(-)

diff --git a/plugins/atem/styles.css b/plugins/atem/styles.css
index ed7ca69..a1a2a64 100644
--- a/plugins/atem/styles.css
+++ b/plugins/atem/styles.css
@@ -19,6 +19,12 @@ h3 {
   border: 1px solid;
   border-color: #1a1a1a;
   border-radius: 5px;
+  width: fit-content;
+}
+
+.empty {
+  border-color: transparent;
+  background-color: transparent;
 }
 
 .atem-red {
@@ -67,18 +73,21 @@ h3 {
 }
 
 .dsk-rate,
-.ftb-rate {
+.ftb-rate,
+.transition-rate {
   display: flex;
   justify-content: center;
   flex-direction: column;
 }
 
-.ftb-rate {
+.ftb-rate,
+.transition-rate {
   width: 50px;
 }
 
 .dsk-rate-label,
-.ftb-rate-label {
+.ftb-rate-label,
+.transition-rate-label {
   color: rgb(235, 110, 0);
   background-color: black;
   border-radius: 3px;
diff --git a/plugins/atem/template.ejs b/plugins/atem/template.ejs
index 3775b7a..3d49316 100644
--- a/plugins/atem/template.ejs
+++ b/plugins/atem/template.ejs
@@ -3,7 +3,6 @@
 </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>
@@ -17,7 +16,6 @@
                 <% }) %>
             </div>
         </div>
-
         <div class="preview">
             <h3 class="atem-gray">Preview</h3>
             <div class="source-wrapper">
@@ -28,21 +26,106 @@
                 <% }) %>
             </div>
         </div>
-
-        <!-- <div class="next-transition">
+        <div class="next-transition">
             <h3>Next Transition</h3>
-            <div class="source-wrapper"></div>
+            <div class="source-wrapper" style="flex-direction:column">
+                <div class="source-wrapper empty">
+                    <div class="atem-input empty"></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">
+                        <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">
+                        <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">
+                        <div class="source-label" style="flex-direction: column;">
+                            <div>ON</div> <div>AIR</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="atem-input empty" style="height:10px"></div>
+                </div>
+
+                <div class="source-wrapper empty">
+                    <div id="me-<%= meIndex %>-bkgd" class="atem-input">
+                        <div class="source-label">BKGD</div>
+                    </div>
+                    <div id="me-<%= meIndex %>-key-1" class="atem-input">
+                        <div class="source-label">KEY 1</div>
+                    </div>
+                    <div id="me-<%= meIndex %>-key-2" class="atem-input">
+                        <div class="source-label">KEY 2</div>
+                    </div>
+                    <div id="me-<%= meIndex %>-key-3" class="atem-input">
+                        <div class="source-label">KEY 3</div>
+                    </div>
+                    <div id="me-<%= meIndex %>-key-4" class="atem-input">
+                        <div class="source-label">KEY 4</div>
+                    </div>
+                </div>
+            </div>
         </div>
         
         <div class="transition-style">
             <h3>Transition Style</h3>
-            <div class="source-wrapper"></div>
-        </div> -->
-
+            <div class="source-wrapper" style="flex-direction:column">
+                <div class="source-wrapper empty">
+                    <div id="me-<%= meIndex %>-trans-0" class="atem-input">
+                        <div class="source-label">MIX</div>
+                    </div>
+                    <div id="me-<%= meIndex %>-trans-1" class="atem-input">
+                        <div class="source-label">DIP</div>
+                    </div>
+                    <div id="me-<%= meIndex %>-trans-2" class="atem-input">
+                        <div class="source-label">WIPE</div>
+                    </div>
+                    <div id="me-<%= meIndex %>-trans-4" class="atem-input">
+                        <div class="source-label">STING</div>
+                    </div>
+                    <div id="me-<%= meIndex %>-trans-3" class="atem-input">
+                        <div class="source-label">DVE</div>
+                    </div>
+                </div>
+                
+                <div>
+                    <div class="atem-input empty" style="height:10px"></div>
+                </div>
+                
+                <div class="source-wrapper empty">
+                    <div id="me-<%= meIndex %>-prevtrans" class="atem-input">
+                        <div class="source-label" style="flex-direction: column;">
+                            <div>PREV</div> <div>TRANS</div>
+                        </div>
+                    </div>
+                    <div class="atem-input empty"></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 empty">
+                        <div class="atem-gray" style="text-align: center">Rate</div>
+                        <div id="me-<%= meIndex %>-transition-rate" class="transition-rate-label">1:00</div>
+                    </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">
+                <div class="ftb-rate atem-input empty">
                     <div class="atem-gray" style="text-align: center">Rate</div>
                     <div id="me-<%= meIndex %>-ftb-rate" class="ftb-rate-label">1:00</div>
                 </div>
@@ -68,14 +151,14 @@
                 <div id="dsk-<%= dskIndex %>-tie" class="atem-input">
                     <div class="source-label">TIE</div>
                 </div>
-                <div class="dsk-rate">
+                <div class="dsk-rate atem-input empty">
                     <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 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>