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: [],