diff --git a/packages/streamwall/src/renderer/overlay.tsx b/packages/streamwall/src/renderer/overlay.tsx
index 5472870..ecc0e3e 100644
--- a/packages/streamwall/src/renderer/overlay.tsx
+++ b/packages/streamwall/src/renderer/overlay.tsx
@@ -40,10 +40,8 @@ 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) {
@@ -107,7 +105,7 @@ function Overlay({
scrolling="no"
/>
))}
-
+
)
}
@@ -132,6 +130,28 @@ function App() {
return
}
+function VersionFooter() {
+ const [isShowing, setShowing] = useState(false)
+ useEffect(() => {
+ let timeout: ReturnType | undefined = undefined
+ const interval = setInterval(() => {
+ setShowing(true)
+ timeout = setTimeout(() => {
+ setShowing(false)
+ }, 5000)
+ }, 30 * 1000)
+ return () => {
+ clearInterval(interval)
+ clearTimeout(timeout)
+ }
+ }, [])
+ return (
+
+ streamwall.io {packageInfo.version}
+
+ )
+}
+
function StreamIcon({ url }: { url: string }) {
let parsedURL
try {
@@ -160,6 +180,10 @@ function StreamIcon({ url }: { url: string }) {
return null
}
+const OverlayContainer = styled.div`
+ overflow: hidden;
+`
+
const SpaceBorder = styled.div.attrs(() => ({
borderWidth: 2,
}))`
@@ -272,7 +296,7 @@ const BlurCover = styled.div`
`
const VersionText = styled.div`
- position: absolute;
+ position: fixed;
bottom: 4px;
right: 4px;
color: white;
@@ -285,7 +309,8 @@ const VersionText = styled.div`
backdrop-filter: blur(30px);
padding: 1px 4px;
border-bottom-left-radius: 4px;
- opacity: 0.65;
+ opacity: ${({ isShowing }) => (isShowing ? '.65' : '.35')};
+ transition: ease-out 500ms all;
`
const OverlayIFrame = styled.iframe`