Salastil/streamwall
1
0
Fork 0
mirror of https://github.com/streamwall/streamwall.git synced 2026-01-27 07:22:50 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add support for background and overlay pages

Browse Source
This commit is contained in:
Max Goodhart
2020-07-27 11:50:54 -07:00
parent bb4d62050c
commit 38ea3df625
6 changed files with 97 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/browser/background.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Woke Stream Background</title>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; style-src 'self' 'unsafe-inline'"
/>
</head>
<body>
<script src="background.js" type="module"></script>
</body>
</html>

43
src/browser/background.js Normal file
View File

@@ -0,0 +1,43 @@
import { ipcRenderer } from 'electron'
import { h, render } from 'preact'
import { useEffect, useState } from 'preact/hooks'
import styled from 'styled-components'
import '../index.css'
function Background({ streams }) {
const backgrounds = streams.filter((s) => s.kind === 'background')
return (
<div>
{backgrounds.map((s) => (
<BackgroundIFrame key={s._id} src={s.link} sandbox="allow-scripts" />
))}
</div>
)
}
function App() {
const [state, setState] = useState({
streams: [],
})
useEffect(() => {
ipcRenderer.on('state', (ev, state) => {
setState(state)
})
}, [])
const { streams } = state
return <Background streams={streams} />
}
const BackgroundIFrame = styled.iframe`
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
border: none;
`
render(<App />, document.body)

14
src/browser/overlay.js
View File

@@ -20,6 +20,7 @@ function Overlay({ config, views, streams }) {
const activeViews = views
.map(({ state, context }) => State.from(state, context))
.filter((s) => s.matches('displaying') && !s.matches('displaying.error'))
const overlays = streams.filter((s) => s.kind === 'overlay')
return (
<div>
{activeViews.map((viewState) => {
@@ -57,6 +58,9 @@ function Overlay({ config, views, streams }) {
</SpaceBorder>
)
})}
{overlays.map((s) => (
<OverlayIFrame key={s._id} src={s.link} sandbox="allow-scripts" />
))}
</div>
)
}
@@ -208,4 +212,14 @@ const BlurCover = styled.div`
backdrop-filter: ${({ isBlurred }) => (isBlurred ? 'blur(30px)' : 'blur(0)')};
`
const OverlayIFrame = styled.iframe`
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
border: none;
pointer-events: none;
`
render(<App />, document.body)