diff --git a/example.config.toml b/example.config.toml
index a29cd3e..500b93d 100644
--- a/example.config.toml
+++ b/example.config.toml
@@ -11,6 +11,9 @@
# Set the background color (useful for chroma-keying)
#background-color = "#0f0"
+# Set the active (highlight) color
+#active-color = "#fff"
+
[grid]
#count = 3
diff --git a/src/browser/overlay.js b/src/browser/overlay.js
index be17828..e88e3cf 100644
--- a/src/browser/overlay.js
+++ b/src/browser/overlay.js
@@ -5,6 +5,7 @@ import { State } from 'xstate'
import styled from 'styled-components'
import { useHotkeys } from 'react-hotkeys-hook'
import { TailSpin } from 'svg-loaders-react'
+import Color from 'color'
import '../index.css'
@@ -16,7 +17,7 @@ import YouTubeIcon from '../static/youtube.svg'
import SoundIcon from '../static/volume-up-solid.svg'
function Overlay({ config, views, streams }) {
- const { width, height } = config
+ const { width, height, activeColor } = config
const activeViews = views
.map(({ state, context }) => State.from(state, context))
.filter((s) => s.matches('displaying') && !s.matches('displaying.error'))
@@ -39,11 +40,12 @@ function Overlay({ config, views, streams }) {
pos={pos}
windowWidth={width}
windowHeight={height}
+ activeColor={activeColor}
isListening={isListening}
>
{data && (
-
+
{data.hasOwnProperty('label') ? (
@@ -149,8 +151,8 @@ const SpaceBorder = styled.div.attrs((props) => ({
pos.y === 0 ? 0 : borderWidth}px;
border-bottom-width: ${({ pos, borderWidth, windowHeight }) =>
pos.y + pos.height === windowHeight ? 0 : borderWidth}px;
- box-shadow: ${({ isListening }) =>
- isListening ? '0 0 10px red inset' : 'none'};
+ box-shadow: ${({ isListening, activeColor }) =>
+ isListening ? `0 0 10px ${activeColor} inset` : 'none'};
box-sizing: border-box;
pointer-events: none;
user-select: none;
@@ -167,8 +169,8 @@ const StreamTitle = styled.div`
color: white;
text-shadow: 0 0 4px black;
letter-spacing: -0.025em;
- background: ${({ isListening }) =>
- isListening ? 'rgba(255, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.5)'};
+ background: ${({ isListening, activeColor }) =>
+ Color(isListening ? activeColor : 'black').alpha(0.5)};
border-radius: 4px;
backdrop-filter: blur(10px);
overflow: hidden;
diff --git a/src/node/index.js b/src/node/index.js
index 731904e..9b9a381 100644
--- a/src/node/index.js
+++ b/src/node/index.js
@@ -39,6 +39,7 @@ function parseArgs() {
'window.y',
'window.frameless',
'window.background-color',
+ 'window.active-color',
],
'Window settings',
)
@@ -64,6 +65,10 @@ function parseArgs() {
describe: 'Background color of wall (useful for chroma-keying)',
default: '#000',
})
+ .option('window.active-color', {
+ describe: 'Active (highlight) color of wall',
+ default: '#fff',
+ })
.group(['data.interval', 'data.json-url', 'data.toml-file'], 'Datasources')
.option('data.interval', {
describe: 'Interval (in seconds) for refreshing polled data sources',
@@ -233,6 +238,7 @@ async function main() {
width: argv.window.width,
height: argv.window.height,
gridCount: argv.grid.count,
+ activeColor: argv.window['active-color'],
},
auth: auth.getState(),
streams: [],