From 9c0f641d1254826ac53c06f81486e81668065177 Mon Sep 17 00:00:00 2001 From: sparks-alec Date: Mon, 28 Oct 2024 04:16:35 -0400 Subject: [PATCH] restyle to match LSS for mac --- plugins/livestream-studio/main.js | 24 +++--- plugins/livestream-studio/styles.css | 106 +++++++++++++++---------- plugins/livestream-studio/template.ejs | 63 ++++----------- 3 files changed, 91 insertions(+), 102 deletions(-) diff --git a/plugins/livestream-studio/main.js b/plugins/livestream-studio/main.js index 5778165..5eaf606 100644 --- a/plugins/livestream-studio/main.js +++ b/plugins/livestream-studio/main.js @@ -29,18 +29,14 @@ exports.update = function update(device, _document, updateType, data) { if (updateType === 'programInput' || updateType === 'previewInput' || updateType === 'inputs') { device.data.inputs.forEach((input) => { if (device.data.program === input.number) { - document.getElementById(`program-input-${input.number}`).classList.add('lss-red'); document.getElementById(`input-${input.number}`).classList.add('lss-red'); } else { - document.getElementById(`program-input-${input.number}`).classList.remove('lss-red'); document.getElementById(`input-${input.number}`).classList.remove('lss-red'); } if (device.data.preview === input.number) { - document.getElementById(`preview-input-${input.number}`).classList.add('lss-green'); document.getElementById(`input-${input.number}`).classList.add('lss-green'); } else { - document.getElementById(`preview-input-${input.number}`).classList.remove('lss-green'); document.getElementById(`input-${input.number}`).classList.remove('lss-green'); } }); @@ -48,22 +44,18 @@ exports.update = function update(device, _document, updateType, data) { const ftbId = 'ftb'; if (device.data.fadeToBlack) { - if (document.getElementById(ftbId).classList.contains('lss-red')) { - document.getElementById(ftbId).classList.remove('lss-red'); - } else { - document.getElementById(ftbId).classList.add('lss-red'); - } + document.getElementById(ftbId).classList.add('lss-ftb-glow'); } else { - document.getElementById(ftbId).classList.remove('lss-red'); + document.getElementById(ftbId).classList.remove('lss-ftb-glow'); } } else if (updateType === 'tbar') { const tbarId = `tbar-div`; const tbarHandleId = `tbar-handle-div`; if (document.getElementById(tbarId)) { - document.getElementById(tbarId).style.height = `${device.data.tBar.percent}%`; + document.getElementById(tbarId).style.height = `${device.data.tBar.percent * 1.4 + 10}px`; } if (document.getElementById(tbarHandleId)) { - document.getElementById(tbarHandleId).style.bottom = `${device.data.tBar.percent}%`; + document.getElementById(tbarHandleId).style.bottom = `${device.data.tBar.percent * 1.4 + 10}px`; } if (device.data.tBar.status === 'Automatic') { @@ -120,8 +112,11 @@ exports.data = function data(_device, msg) { device.update('previewInput', device.data); } else if (packetType === 'Cut') { [device.data.preview, device.data.program] = [device.data.program, device.data.preview]; + device.data.tBar.percent = 0; + device.data.tBar.status = 'Stop'; device.update('cut'); - device.update('program', device.data); + device.update('inputs', device.data); + device.update('tbar', device.data); } else if (packetType === 'FOut') { device.data.fadeToBlack = true; device.update('fadeToBlack', device.data); @@ -139,6 +134,9 @@ exports.data = function data(_device, msg) { } device.update('tbar', device.data); } else if (packetType === 'TrAStart' || packetType === 'TrAStop') { + if (device.data.tBar === undefined) { + device.data.tBar = {}; + } device.data.tBar.status = packetType.slice(3); if (packetType === 'TrAStop') { device.data.tBar.percent = 0; diff --git a/plugins/livestream-studio/styles.css b/plugins/livestream-studio/styles.css index c242184..7c63e95 100644 --- a/plugins/livestream-studio/styles.css +++ b/plugins/livestream-studio/styles.css @@ -1,58 +1,76 @@ body { - background-color: #282828; + background-color: #191919; } h1 { font-family: 'Open Sans', sans-serif; } -h3 { - color: #6d6d6d !important; - margin: 30px 0px 10px 9px; - font-size: 0.9em; - font-weight: 400; - font-family: 'Open Sans', sans-serif; +h5 { + color: white; + margin: 0px 0px 10px 3px; + font-weight: bold; + width: 100%; + /* font-family: 'Open Sans', sans-serif; */ } .lss-input { - width: 52px; - height: 52px; - background-image: url('img/button_white.png'); + width: 120px; + height: 40px; + background-color: #242424; + color: white; + border: #242424 6px solid; + outline: black 1px solid; + outline-offset: -1px; +} + +.lss-button { + width: 80px; + height: 30px; + background: linear-gradient(#363636, #282828); + border-radius: 5px; + border: black 2px solid; + color: gray; + margin-bottom: 5px; } .source-wrapper { display: flex; flex-wrap: wrap; - background-color: #1f1f1f; - border: #1a1a1a 2px solid; - border-radius: 8px; - max-width: 416px; - padding: 12px; + background-color: #000000; + width: 122px; + border: black 1px solid; } .lss-red { - background-image: url('img/button_red.png'); - box-shadow: 0px 0px 10px 1px #ff0000; - z-index: 10000; + border-color: #6f1607; + outline-color: #ff0000; +} +.lss-button.lss-red { + color: #6f1607; } .lss-green { - background-image: url('img/button_green.png'); - box-shadow: 0px 0px 10px 1px #06c300; - z-index: 10000; -} - -.lss-yellow { - background-image: url('img/button_yellow.png'); - box-shadow: 0px 0px 10px 1px #c7ca00; - z-index: 10000; + border-color: #395a13; + outline-color: #558522; } .lss-disabled { - background-image: url('img/button_off.png'); color: #3a3a3a; } -.lss-gray { - color: #575757; +.lss-ftb-glow { + border: gray 2px solid; + animation: ftb-glow 0.75s infinite alternate; +} + +@keyframes ftb-glow { + 0% { + border-color: #666666; + color: #666666; + } + 100% { + border-color: #fc584b; + color: #fc584b; + } } .source-label { @@ -64,6 +82,10 @@ h3 { font-weight: bold; } +.inputs-container { + width: 200px; +} + .transition-container { display: flex; flex-wrap: wrap; @@ -80,29 +102,27 @@ h3 { .tbar-container { display: flex; flex-direction: column-reverse; - background-color: #1f1f1f; - border: 2px solid; - border-color: #1a1a1a; - border-radius: 6px; - width: 88px; - height: 429px; + background-color: red; + border: 2px black solid; + width: 80px; + height: 176px; position: relative; - margin-top: 58px; - margin-right: 60px; + margin-bottom: 10px; } .tbar-bg { position: absolute; background-image: url('img/tbar_bg.png'); - width: 88px; - height: 429px; + width: 80px; + height: 176px; } .tbar-handle { position: absolute; background-image: url('img/tbar_handle.png'); - width: 126px; - height: 50px; - left: -3px; + width: 42px; + height: 20px; + left: 19px; + bottom: 10px; } .tbar-div { width: 100%; diff --git a/plugins/livestream-studio/template.ejs b/plugins/livestream-studio/template.ejs index 08a70bf..bd21298 100644 --- a/plugins/livestream-studio/template.ejs +++ b/plugins/livestream-studio/template.ejs @@ -3,8 +3,8 @@ <% if (data.inputCount) { %> -
-

Preview/Program

+
+
INPUTS
<% data.inputs.forEach((input)=>{ %>
@@ -13,27 +13,6 @@ <% }) %>
-
-
-

Program

-
- <% data.inputs.forEach((input)=>{ %> -
-
<%= input.name %>
-
- <% }) %> -
-
-
-

Preview

-
- <% data.inputs.forEach((input)=>{ %> -
-
<%= input.name %>
-
- <% }) %> -
-
@@ -65,31 +44,23 @@
-->
-

Transition Style

-
-
-
CUT
-
-
-
AUTO
-
-
-
-
-
-
-
-
-
-
-
-

Fade to Black

-
-
-
FTB
-
+
TRANSITION
+
+
CUT
+
+
+
AUTO
+
+
+
+
+
+
+
+
FTB
+
<% } %>