diff --git a/packages/streamwall/src/renderer/overlay.tsx b/packages/streamwall/src/renderer/overlay.tsx index 1fda9fe..5472870 100644 --- a/packages/streamwall/src/renderer/overlay.tsx +++ b/packages/streamwall/src/renderer/overlay.tsx @@ -15,6 +15,7 @@ import { StreamwallState } from 'streamwall-shared' import { styled } from 'styled-components' import { TailSpin } from 'svg-loaders-react' import { matchesState } from 'xstate' +import packageInfo from '../../package.json' import { StreamwallLayerGlobal } from '../preload/layerPreload' import '@fontsource/noto-sans' @@ -40,6 +41,9 @@ function Overlay({ const overlays = streams.filter((s) => s.kind === 'overlay') return (
+ + streamwall.io {packageInfo.version} + {activeViews.map(({ state, context }) => { const { content, pos } = context if (!content) { @@ -267,6 +271,23 @@ const BlurCover = styled.div` backdrop-filter: ${({ isBlurred }) => (isBlurred ? 'blur(30px)' : 'blur(0)')}; ` +const VersionText = styled.div` + position: absolute; + bottom: 4px; + right: 4px; + color: white; + font-size: 12px; + text-shadow: + 0 0 1px rgba(0, 0, 0, 0.5), + 1px 0 1px rgba(0, 0, 0, 0.5), + 0 1px 1px rgba(0, 0, 0, 0.5), + 1px 1px 1px rgba(0, 0, 0, 0.5); + backdrop-filter: blur(30px); + padding: 1px 4px; + border-bottom-left-radius: 4px; + opacity: 0.65; +` + const OverlayIFrame = styled.iframe` position: fixed; left: 0;