mirror of
https://github.com/stagehacks/Cue-View.git
synced 2026-08-10 08:13:38 +00:00
populate next transition and transition style
This commit is contained in:
+12
-3
@@ -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;
|
||||
|
||||
+95
-12
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user