mirror of
https://github.com/stagehacks/Cue-View.git
synced 2026-08-06 14:23:40 +00:00
update transition layout
This commit is contained in:
Joel Wetzell
@@ -45,9 +45,9 @@ exports.update = function update(device, _document, updateType, data) {
|
||||
if (updateType.includes('transitionPosition')) {
|
||||
for (let i = 0; i < data.video.mixEffects.length; i++) {
|
||||
const mixEffect = data.video.mixEffects[i];
|
||||
const tbarId = `me-${i}-tbar-progress`;
|
||||
const tbarId = `me-${i}-tbar-div`;
|
||||
if (document.getElementById(tbarId)) {
|
||||
document.getElementById(tbarId).value = mixEffect.transitionPosition.handlePosition;
|
||||
document.getElementById(tbarId).style.height = `${mixEffect.transitionPosition.handlePosition / 100}%`;
|
||||
}
|
||||
// TODO: format in 0:00 format
|
||||
document.getElementById(`me-${i}-transition-rate`).textContent =
|
||||
|
||||
+36
-5
@@ -22,11 +22,6 @@ h3 {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.empty {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.atem-red {
|
||||
background: rgb(255, 130, 131);
|
||||
background: radial-gradient(circle, rgba(255, 130, 131, 1) 0%, rgba(255, 41, 40, 1) 100%);
|
||||
@@ -53,12 +48,34 @@ h3 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.transition-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tbar-progress {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
accent-color: limegreen;
|
||||
}
|
||||
|
||||
.tbar-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
background-color: #1f1f1f;
|
||||
border: 4px solid;
|
||||
border-color: #1a1a1a;
|
||||
border-radius: 6px;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.tbar-div {
|
||||
width: 100%;
|
||||
background-color: limegreen;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dsk .source-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -66,6 +83,11 @@ h3 {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.fade-to-black-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.fade-to-black .source-wrapper {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
@@ -95,6 +117,15 @@ h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.clear {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
+108
-104
@@ -40,118 +40,123 @@
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="next-transition">
|
||||
<h3>Next Transition</h3>
|
||||
<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 class="transition-container">
|
||||
<div>
|
||||
<div class="next-transition">
|
||||
<h3>Next Transition</h3>
|
||||
<div class="source-wrapper" style="flex-direction:column">
|
||||
<div class="source-wrapper no-wrap clear">
|
||||
<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">
|
||||
<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 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>
|
||||
<div class="atem-input clear" style="height:10px"></div>
|
||||
</div>
|
||||
|
||||
<div class="source-wrapper empty">
|
||||
<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">
|
||||
<div class="source-label">KEY 2</div>
|
||||
</div>
|
||||
<div id="me-<%= meIndex %>-transition-selection-8" class="atem-input">
|
||||
<div class="source-label">KEY 3</div>
|
||||
</div>
|
||||
<div id="me-<%= meIndex %>-transition-selection-16" 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" style="flex-direction:column">
|
||||
<div class="source-wrapper empty">
|
||||
<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>
|
||||
|
||||
<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 class="source-wrapper no-wrap clear">
|
||||
<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">
|
||||
<div class="source-label">KEY 2</div>
|
||||
</div>
|
||||
<div id="me-<%= meIndex %>-transition-selection-8" class="atem-input">
|
||||
<div class="source-label">KEY 3</div>
|
||||
</div>
|
||||
<div id="me-<%= meIndex %>-transition-selection-16" class="atem-input">
|
||||
<div class="source-label">KEY 4</div>
|
||||
</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">00</div>
|
||||
</div>
|
||||
|
||||
<div class="transition-style">
|
||||
<h3>Transition Style</h3>
|
||||
<div class="source-wrapper" style="flex-direction:column">
|
||||
<div class="source-wrapper no-wrap clear">
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<div class="atem-input clear" style="height:10px"></div>
|
||||
</div>
|
||||
|
||||
<div class="source-wrapper no-wrap clear">
|
||||
<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 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" style="text-align: center">Rate</div>
|
||||
<div id="me-<%= meIndex %>-transition-rate" class="transition-rate-label">00</div>
|
||||
</div>
|
||||
</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 atem-input empty">
|
||||
<div class="atem-gray" style="text-align: center">Rate</div>
|
||||
<div id="me-<%= meIndex %>-ftb-rate" class="ftb-rate-label">00</div>
|
||||
</div>
|
||||
<div id="me-<%= meIndex %>-ftb" class="atem-input">
|
||||
<div class="source-label">FTB</div>
|
||||
<div class="tbar-container">
|
||||
<div id="me-<%= meIndex %>-tbar-div" class="tbar-div" ></div>
|
||||
</div>
|
||||
<div class="fade-to-black-container">
|
||||
<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" style="text-align: center">Rate</div>
|
||||
<div id="me-<%= meIndex %>-ftb-rate" class="ftb-rate-label">00</div>
|
||||
</div>
|
||||
<div id="me-<%= meIndex %>-ftb" class="atem-input">
|
||||
<div class="source-label">FTB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="source-wrapper" style="width:100%">
|
||||
<progress id="me-<%= meIndex %>-tbar-progress" max="10000" value="0" class="tbar-progress"></progress>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
@@ -165,7 +170,7 @@
|
||||
<div id="dsk-<%= dskIndex %>-tie" class="atem-input">
|
||||
<div class="source-label">TIE</div>
|
||||
</div>
|
||||
<div class="dsk-rate atem-input empty">
|
||||
<div class="dsk-rate atem-input clear">
|
||||
<div class="atem-gray" style="text-align: center">Rate</div>
|
||||
<div id="dsk-<%= dskIndex %>-rate" class="dsk-rate-label">00</div>
|
||||
</div>
|
||||
@@ -180,5 +185,4 @@
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
|
||||
<% } %>
|
||||
Reference in New Issue
Block a user