app: Indicator when configuration examples are live

src/overlay/components/liveHistoryIndicator.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {Radio, ZapOff} from 'react-feather';
+
+type Props = {
+  active: boolean;
+};
+
+const LiveHistoryIndicator = ({active}: Props) => (
+  <Container showingLiveHistory={active}>
+    {active ? <Radio size="1.25rem" /> : <ZapOff size="1rem" />}
+    {active
+      ? 'Using real-time metadata from your devices'
+      : 'Showing demo metadata (Play a track to see live metadata)'}
+  </Container>
+);
+
+const Container = styled('div')<{showingLiveHistory: boolean}>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  position: relative;
+  top: -1rem;
+  left: -1.75rem;
+  height: 1.75rem;
+  margin-bottom: 0.5rem;
+  padding: 0 1rem;
+  background: ${p => (p.showingLiveHistory ? '#ff838e' : '#4B97F8')};
+  color: #fff;
+  font-size: 0.675rem;
+  text-transform: uppercase;
+  font-weight: 700;
+`;
+
+export default LiveHistoryIndicator;

src/overlay/overlays/taggedNowPlaying/index.tsx

@@ -13,6 +13,7 @@ import Checkbox from 'app/components/form/Checkbox';
 import Text from 'app/components/form/Text';
 import Field from 'app/components/form/Field';
 import Select from 'src/renderer/components/form/Select';
+import LiveHistoryIndicator from 'src/overlay/components/liveHistoryIndicator';
 
 type TaggedNowPlaying = {
   type: 'taggedNowPlaying';
@@ -119,14 +120,26 @@ const EmptyExample = styled('div')`
   }
 `;
 
-const Example: React.FC<{config?: Config}> = ({config}) => {
-  const history = useRandomHistory({cutoff: 5, updateInterval: 5000});
-  return history.length === 0 ? (
-    <EmptyExample />
-  ) : (
-    <Overlay config={config ?? {historyCount: 0}} history={history.slice().reverse()} />
+const Example: React.FC<{config?: Config}> = observer(({config}) => {
+  const demoHistory = useRandomHistory({cutoff: 5, updateInterval: 5000});
+  const liveHistory = store.mixstatus.trackHistory;
+
+  const history = liveHistory.length === 0 ? demoHistory : liveHistory;
+
+  const example =
+    history.length === 0 ? (
+      <EmptyExample />
+    ) : (
+      <Overlay config={config ?? {historyCount: 0}} history={history.slice().reverse()} />
+    );
+
+  return (
+    <React.Fragment>
+      <LiveHistoryIndicator active={liveHistory.length > 0} />
+      {example}
+    </React.Fragment>
   );
-};
+});
 
 const HistoryOverlay: React.FC<{config: Config}> = observer(({config}) => (
   <Overlay history={store.mixstatus.trackHistory.slice().reverse()} config={config} />